我试图在firefox中设计<select>的样式。我用铬做的：
-webkit-appearance: none;
background: #eeeeee url("../img/select-arrow.jpg") no-repeat center right;
但在firefox上，我似乎无法用获得相同的结果
-moz-appearance: none;
background: #eeeeee url("../img/select-arrow.jpg") no-repeat center right;
有什么想法吗？谢谢
由于Firefox 35，您已经在代码中编写了"-moz-appearance:none"，因此最终根据需要删除箭头按钮。
这是自那个版本以来解决的一个错误。
看起来这是Firefox上的bug：-moz外观：没有select元素。有关详细信息，请参阅此错误报告：https://bugzilla.mozilla.org/show_bug.cgi?id=649849
与此完全重复：https://stackoverflow.com/a/18317228/1411163
相同答案：
刚刚想好了如何从Firefox中删除选择箭头。诀窍是混合使用前缀外观、文本缩进和文本溢出。它是纯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
EDIT[2]：由于@joão-cunha的绝妙技巧在FF30中停止工作，请参阅此新的解决方法：http://jsfiddle.net/sstur/2EZ9f/（基于@keska的显示：flex修复和一些文本阴影魔法）
EDIT：这可以使用纯CSS来完成，如下所示：http://jsfiddle.net/sstur/fm5Jt/
这将使其在Chrome、Firefox、IE10+中具有风格，并将在旧的IE和其他传统浏览器中优雅地降级。它使用了各种特定于供应商的解决方案，包括您提到的-webkit-appearance: none。
您可以尝试为-moz-appearance属性使用不同的值。例如
-moz-appearance: toolbox;对我来说很好。
可以在此处找到完整的值列表：https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance
尝试以下代码示例：
<h2>CSS-only custom-styled selects v8</h2>
<p><Strong>How this works:</strong> This styles a native select consistently cross-platform with only minimal CSS. The native select is then styled so it is essentially invisible (no appearance, border, bg) leaving only the select's text visible. There is a wrapper around the select that has the majority of the button styles (gradient, shadow, border, etc.). We then add the custom arrow via a pseudo element to the right. </p>
<label>Native select</label>
<select>
<option>Apples</option>
<option>Bananas</option>
<option>Grapes</option>
<option>Oranges</option>
<option selected>A very long option name to test wrapping</option>
</select>
<label class="wrapper">This label wraps the select
<div class="button custom-select ff-hack">
<select>
<option>Apples</option>
<option>Bananas</option>
<option>Grapes</option>
<option>Oranges</option>
<option>A very long option name to test wrapping</option>
</select>
</div>
</label>
<label class="wrapper" for="states">This label is stacked above the select</label>
<div class="button custom-select">
<select id="states">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
<div style="width:50%; min-width:10em;">
<label class="wrapper">In 50% wide container
<div class="button custom-select">
<select>
<option>Apples</option>
<option>Bananas</option>
<option>Grapes</option>
<option>Oranges</option>
<option>A very long option name to test wrapping and visual collisions</option>
</select>
</div>
</label>
</div>
<label>Text input:
<input type="text" placeholder="I'm a placeholder">
</label>
<h4><a href="https://twitter.com/toddmparker">Todd Parker</a> - <a href="http://www.filamentgroup.com">Filament Group Inc.</a></h4>
<h4>Taken From <a href="http://jsbin.com/yaruh/edit?html,output">Todd Parker's JSBIN</a></h4>
<h4>Taken From <a href="https://gist.github.com/joaocunha/6273016">Joaocunha's Gist</a></h4>
<p><strong>Joaocunha's Update:</strong> <a href="https://hg.mozilla.org/mozilla-central/rev/161e4dbfff7d">Thu Oct 02, 2014</a><br>
Mozilla to address this issue (Target: v.35)<br>
<i>Bug 649849, part 1 - Make -moz-appearance:none on a combobox remove the dropdown button (for WebKit compat). r=roc</i></p>
<h2>Confirmed to work in the following browsers</h2>
<p>This technique seems to be functional everywhere since we're still leaving the native select in place. Worst case, the native select styling and the custom arrow will both show up but in all popular platforms, this looks very good and consistent. One minor caveat: setting the select to 110% means the menu may open up a bit wider than expected in Firefox. <a href="http://postimg.org/image/g7i0o6mr1/">Visual Test results</a></p>
<h3>Custom select styled consistently</h3>
<ul>
<li>iOS 4/5/6/7/8 - looks good, iOS3 even works fine but isn't quite as pretty</li>
<li>Android 2.2/2.3 (Browser) - looks good</li>
<li>Android 4.0/4.1/4.2 (Browser) - looks good</li>
<li>Android 4.0/4.1/4.2/4.3/4.4 (Chrome) - looks good</li>
<li>WP8 - looks good</li>
<li>Kindle Fire 2/HD - looks good</li>
<li>IE 10/11 - looks good</li>
<li>Safari 5 - looks good</li>
<li>Chrome 22-35 - looks good</li>
<li>Opera 15-22 - looks good</li>
</ul>
<h3>Custom select with minor visual issues</h3>
<ul>
<li>iOS3 even works fine but isn't quite as pretty</li>
<li>Firefox (all versions) - select menu when open is wider then it needs to be (by ~50px) to clip off the native arrow. Note that the select text can run under the arrow, no solution found for that.</li>
<li>Opera Mini - alignment of text and arrows is a bit off but it works</li>
<li>Opera Mobile - custom and native arrows both appear</li>
<li>Nokia Asha - Long options can break outside the box</li>
</ul>
<h3>Native select</h3>
<ul>
<li>WP 7.5-7.8 - native select</li>
<li>IE 6/7/8/9 - native select</li>
<li>Opera pre-14 - native select</li>
</ul>
和风格：
/* Some basic page styles */
body {
background-color: #fff;
font-family: helvetica, sans-serif;
margin: 4% 10%
}
/* Label styles: style as needed */
label {
display:block;
margin-top:2em;
font-size: 0.9em;
color:#777;
}
/* Container used for styling the custom select, the buttom class below adds the bg gradient, corners, etc. */
.custom-select {
position: relative;
display:block;
margin-top:0.5em;
padding:0;
}
/* These are the "theme" styles for our button applied via separate button class, style as you like */
.button {
border: 1px solid #bbb;
border-radius: .3em;
box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
background: #f3f3f3; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */
}
/* This is the native select, we're making everything but the text invisible so we can see the button styles in the wrapper */
.custom-select select {
width:100%;
margin:0;
background:none;
border: 1px solid transparent;
outline: none;
/* Prefixed box-sizing rules necessary for older browsers */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* Remove select styling */
appearance: none;
-webkit-appearance: none;
/* Font size must the 16px or larger to prevent iOS page zoom on focus */
font-size:16px;
/* General select styles: change as needed */
font-family: helvetica, sans-serif;
font-weight: bold;
color: #444;
padding: .6em 1.9em .5em .8em;
line-height:1.3;
}
/* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select. Note this si a 2x image so it will look bad in browsers that don't support background-size. In production, you'd handle this resolution switch via media query but this is a demo. */
.custom-select::after {
content: "";
position: absolute;
width: 9px;
height: 8px;
top: 50%;
right: 1em;
margin-top:-4px;
background-image: url(http://filamentgroup.com/files/select-arrow.png);
background-repeat: no-repeat;
background-size: 100%;
z-index: 2;
/* These hacks make the select behind the arrow clickable in some browsers */
pointer-events:none;
}
/* Hover style */
.custom-select:hover {
border:1px solid #888;
}
/* Focus style */
.custom-select select:focus {
outline:none;
box-shadow: 0 0 1px 3px rgba(180,222,250, 1);
background-color:transparent;
color: #222;
border:1px solid #aaa;
}
/* Set options to normal weight */
.custom-select option {
font-weight:normal;
}
/* ------------------------------------ */
/* START OF UGLY BROWSER-SPECIFIC HACKS */
/* ---------------------------------- */
/* OPERA - Pre-Blink nix the custom arrow, go with a native select button to keep it simple. Targeted via this hack http://browserhacks.com/#hack-a3f166304aafed524566bc6814e1d5c7 */
x:-o-prefocus, .custom-select::after {
display:none;
}
/* IE 10/11+ - This hides native dropdown button arrow so it will have the custom appearance, IE 9 and earlier get a native select - targeting media query hack via http://browserhacks.com/#hack-28f493d247a12ab654f6c3637f6978d5 - looking for better ways to achieve this targeting */
/* The second rule removes the odd blue bg color behind the text in the select button in IE 10/11 and sets the text color to match the focus style's - fix via http://stackoverflow.com/questions/17553300/change-ie-background-color-on-unopened-focused-select-box */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.custom-select select::-ms-expand {
display: none;
}
.custom-select select:focus::-ms-value {
background: transparent;
color: #222;
}
}
/* FIREFOX won't let us hide the native select arrow, so we have to make it wider than needed and clip it via overflow on the parent container. The percentage width is a fallback since FF 4+ supports calc() so we can just add a fixed amount of extra width to push the native arrow out of view. We're applying this hack across all FF versions because all the previous hacks were too fragile and complex. You might want to consider not using this hack and using the native select arrow in FF. Note this makes the menus wider than the select button because they display at the specified width and aren't clipped. Targeting hack via http://browserhacks.com/#hack-758bff81c5c32351b02e10480b5ed48e */
/* Show only the native arrow */
@-moz-document url-prefix() {
.custom-select {
overflow: hidden;
}
.custom-select select {
width: 120%;
width: -moz-calc(100% + 3em);
width: calc(100% + em);
}
}
/* Firefox focus has odd artifacts around the text, this kills that. See https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-focusring */
.custom-select select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
/* ------------------------------------ */
/* END OF UGLY BROWSER-SPECIFIC HACKS */
/* ------------------------------------ */
参考：http://jsfiddle.net/xvushd7x/
我想让Firefox中的select元素看起来像Chrome中的元素（截至本文撰写之时）。这个CSS包括svg来代替向下的V字形。
select {
width: 100px;
height: 30px;
border: 1px solid #ccc;
border-radius: 3px;
background-color: white;
@-moz-document url-prefix() {
-moz-appearance: none;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center right;
}
}<select>
<option>The quick</option>
<option>Brown fox</option>
<option>Jumps over</option>
<option>The lazy</option>
<option>Doggo</option>
</select>要在Firefox中设置选择框元素的样式，可以使用CSS来针对特定元素并设置自定义样式属性。以下是一个如何为Firefox设置选择框元素样式的示例：
/* Target the select element */
select {
font-family: Arial, sans-serif; font-size: 14px; color: #333;
width: 200px;
padding: 10px;
border: 1px solid #ccc;
background-color: #fff;
-moz-appearance: none;
appearance: none;
background-image: url("down-arrow.png");
background-position: center right;
background-repeat: no-repeat;
background-size: 10px;
}
/* Target the select arrow button */
select::-moz-focus-inner {
border: none;
outline: none;
}
/* Target the dropdown menu */
select option {
font-family: Arial, sans-serif; font-size: 14px; color: #333;
background-color: #f2f2f2;
}
/* Target the selected option * /
select option:checked { font-weight: bold; }
<select>
<option>One</option>
<option>Two</option>
<option>Three</option>
<option>Four</option>
</select>
这个CSS代码将为select box元素设置样式，使其具有自定义字体、填充、边框、背景色和自定义向下箭头图标。它还删除了选择框的默认样式，并为下拉菜单选项和选定选项设置了自定义样式。请确保更新背景图像属性中的文件路径，使其指向您自己的向下箭头图标图像。
您可以使用文档部分中的标记将此CSS代码添加到HTML文件中，也可以使用<链接>标签
注意：此代码专门针对Firefox，可能无法在其他浏览器中正常工作。