删除Firefox中的默认选择框箭头

Question

我必须删除 Firefox 中的默认选择框箭头 我使用了下面的代码

-webkit-appearance: none;
-moz-appearance:none; 
background: rgba(0,0,0,0);

它在 chrome 中运行良好。但它在 Firefox 中不起作用。

Answer 1

更新：这已在 Firefox v35 中得到修复。详情请见full gist。

---

刚刚弄清楚如何从 Firefox 中删除选择箭头。诀窍是混合使用-prefix-appearance、text-indent 和text-overflow。它是纯 CSS，不需要额外的标记。

select {
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
}

在 Windows 8、Ubuntu 和 Mac、最新版本的 Firefox 上测试。

现场示例：http://jsfiddle.net/joaocunha/RUEbp/1/

更多主题：https://gist.github.com/joaocunha/6273016

Answer 2

可以通过以下方式处理此问题： 1）你的html可能是这样的：

<div class="select-box">
    <select>
        <option>Mozilla Firefox</option>
        <option>Google Chrome</option>
        <option>Apple Safari</option>
        <option>Internet Explorer</option>
    </select>
</div>

2)你的css应该是这样的：

.select-box select{width:100%}
/* For Microsoft IE */
select::-ms-expand {    display: none; }

/* For Webkit based browsers Google Chrome, Apple Safari and latest Gecko browsers */
select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

试试看。我希望这有帮助。使用最新版本的 firefox、chrome、ie 和 safari，如果不是在所有版本上。但请检查所有浏览器的所有版本。

Answer 3

我认为在 Firefox 中没有简单的方法可以做到这一点，尤其是对于 Linux 和 Mac OS 版本。 将选择框的不透明度更改为 0，然后使用 div/span 来包含选择框。之后，在该容器上添加一些样式。这是一个不推荐的解决方法，如果我们只想更改选择框的样式，成本太高。但是，无论如何它都能解决问题。希望这可以帮助。 =)

原文：

<select>
    <option>Value 1</option>
    <option>Value 2</option>
</select>

新：

<span class="select-container">
    <select>
        <option>Value 1</option>
        <option>Value 2</option>
    </select>
</span>

风格：

.select-container {
    width: 100px;
    height: 30px;
    position: relative;
    border: 1px solid #ccc;
    background: url("path of the arrow image") no-repeat right center;
    background-size: 25px;
}
select {
    position: absolute;
    opacity: 0;
    outline: 0;
}

然后，添加一些 Javascript 以在容器中显示所选值。

Answer 4

在 Chrome 和 Mozilla 中从选择中删除下拉箭头的简单方法

select {
        /*for firefox*/
        -moz-appearance: none;
        /*for chrome*/
        -webkit-appearance:none;
      }

/*for IE10*/
select::-ms-expand {
    display: none;
}

<select>
 <option>India</option >
 <option>India</option >
 <option>India</option >    
</select>

Answer 5

gcyrillus 在这个网站上为这个问题提出了一个简洁的解决方案。

http://css-tricks.com/forums/topic/remove-select-arrow-for-chrome-and-firefox/

Answer 6

    $(document).ready(function(){
        $(".selsect_class").each(function(){
            $(this).after("<span class='select_holder'></span>");
        });
        $(".selsect_class").change(function(){
            var selectedOption = $(this).find(":selected").text();
            $(this).next(".select_holder").text(selectedOption);
        }).trigger('change');
    })

.selsect_id{
		background: url("http://a1lrsrealtyservices.com/demo/ot-select.png") no-repeat scroll right center #fff;
		border: 1px solid #ccc;
		border-radius: 2px;
		box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05) inset;
		box-sizing: border-box;
		display: block;
		font-size: 12px;
		height: 29px;
		margin: 0 5px 5px 0;
		width: 100%;
	}
	.selsect_class{
		cursor: pointer;
		font-size: 14px;
		height: 29px;
		opacity: 0;
		position: relative;
		width: inherit;
		z-index: 4;
	}
	.selsect_class option{padding: 3px 15px;}
	.select_holder{position: absolute;left: 30px;top: 5px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="selsect_id">
	<select class="selsect_class">
		<option value="">- Choose One -</option>
		<option value="1">jillur</option>
		<option value="2">korim</option>
		<option value="3">rohim</option>
		<option value="4">Uncategorized</option>
	</select>
</div>

preview image