如何从 Firefox 中的选择元素中移除箭头

小开

不幸的是，你这是的“东西花哨”。通常情况下，重新设计表单元素不是网站作者的职责。许多浏览器故意不让您设置它们的样式，以便用户查看他们习惯的操作系统控件。

在浏览器和操作系统上实现这一点的唯一方法是使用 JavaScript 并将 select元素替换为“ DHTML”元素。

接下来的文章展示了三个基于 jQuery 的插件，可以让你做到这一点(它有点旧，但我现在找不到任何当前的东西)

Http://www.queness.com/post/204/25-jquery-plugins-that-enhance-and-beautify-html-form-elements#1

小开

CSS3中的 appearance属性不允许 none值。看看 W3C 引用。所以，你正在尝试做的是无效的(实际上 Chrome 也不应该接受)。

然后不幸的是，我们真的没有任何跨浏览器的解决方案来隐藏箭头使用纯 CSS。如前所述，您将需要 JavaScript。

我建议你考虑使用 JQuery 插件。它非常轻量级，而且做得很好。

小开

虽然不是一个完整的解决方案，我发现..。

-moz-appearance: window;

在某种程度上起作用。您不能更改背景(- color 或-image) ，但是元素可以使用颜色显示为不可见: 透明。不完美，但是这是一个开始，您不需要将系统级元素替换为 jsone。

小开

我知道这个问题有点老套，但既然它出现在谷歌上，这是一个“新”的解决方案:

appearance: normal在 Firefox (现在的版本5)中看起来很好用，但是在 Opera 和 IE8/9中就不行了

作为 Opera 和 IE9的工作区，我使用了 :before伪选择器来创建一个新的白框，并将其放在箭头的顶部。

不幸的是，在 IE8中，这个没有可以正常工作。框渲染正确，但是箭头还是突出来了... :-/

使用 select:before在 Opera 中可以很好地工作，但在 IE 中就不行了。如果我查看开发人员工具，我发现它正确地读取了规则，然后忽略了它们(它们被划掉了)。所以我在实际的 <select>周围使用 <span class="selectwrap">。

select {
-webkit-appearance: normal;
-moz-appearance: normal;
appearance: normal;
}
.selectwrap { position: relative; }
.selectwrap:before {
content: "";
height: 0;
width: 0;
border: .9em solid red;
background-color: red;
position: absolute;
right: -.1em;
z-index: 42;
}

你可能需要稍微调整一下，但这对我很有用！

免责声明: 我使用这个来获得一个好看的表单网页的硬拷贝，所以我不需要创建第二个页面。我不是一个1337 haxx0r 谁想要红色滚动条，<marquee>标签，和诸如此类的东西: ——请不要应用过多的样式表，除非你有一个非常好的理由。

小开

对我有用的诀窍是使选择宽度大于100% 并应用溢出: 隐藏

select {
overflow:hidden;
width: 120%;
}

这是目前在 FF 中隐藏下拉箭头的唯一方法。

顺便说一下，如果你想要美丽的下拉使用 http://harvesthq.github.com/chosen/

小开

您可以增加方块的宽度，并将箭头移近箭头的左侧。然后，这允许您用一个空白 div 来覆盖箭头。

看看: http://jsbin.com/aniyu4/86/edit

小开

我们找到了一个简单体面的方法。它是跨浏览器的，可降解的，而且不会破坏一个表格帖子。首先将选择框的 opacity设置为 0。

.select {
opacity : 0;
width: 200px;
height: 15px;
}


<select class='select'>
<option value='foo'>bar</option>
</select>

这样你还可以点击它

然后使用与选择框相同的尺寸创建 div。Div 应该放在选择框下作为背景。使用 { position: absolute }和 z-index来实现这一点。

.div {
width: 200px;
height: 15px;
position: absolute;
z-index: 0;
}


<div class='.div'>{the text of the the current selection updated by javascript}</div>
<select class='select'>
<option value='foo'>bar</option>
</select>

用 javascript 更新 div 的 innerHTML:

$('.select').click(function(event)) {
$('.div').html($('.select option:selected').val());
}

就是这样！只要设置 div 的样式，而不是选择框。我还没有测试上面的代码，所以你可能需要调整它。但希望你能明白我的意思。

我认为这个解决方案胜过 {-webkit-appearance: none;}。浏览器最应该做的就是指定与表单元素的交互，但绝对不能指定它们最初在页面上的显示方式，因为这会破坏站点设计。

小开

试试这样:

-webkit-appearance: button;
-moz-appearance: button;

然后，你可以使用一个不同的图像作为背景并放置它:

background-image: url(images/select-arrow.png);
background-position: center right;
background-repeat: no-repeat;

Moz 浏览器还有另一种方式:

text-indent:10px;

如果您有一个定义的宽度，您选择，这个属性将按下选择区域下的默认下拉框按钮。

对我有用! ;)

小开

您愿意接受对 html 的细微更改吗？

类似于放置包含选择标记的 div 标记。

看看吧。

小开

使用 pointer-events属性。

这里的想法是将一个元素覆盖在本机下拉箭头上(以创建我们的自定义箭头) ，然后禁止在该元素上使用指针事件。[见这篇文章]

下面是使用此方法的工作 译自: 美国《科学》杂志网站(http://jsfiddle.net/danield770/9zxzz/4/”rel = “ nofollow noReferrer”> FIDDLE 。

另外，在这么回答中，我更详细地讨论了这个方法和另一个方法。

小开

最佳答案

好吧，我知道这个问题有点老套，但是2年过去了 Mozilla 什么都没做。

我想到了一个简单的解决办法。

这实际上剥离了 Firefox 中选择框的所有格式，并使用自定义样式将 span 元素包围在选择框周围，但应该只应用于 firefox。

假设这是您的选择菜单:

<select class='css-select'>
<option value='1'> First option </option>
<option value='2'> Second option </option>
</select>

假设 css 类“ css-select”是:

.css-select {
background-image: url('images/select_arrow.gif');
background-repeat: no-repeat;
background-position: right center;
padding-right: 20px;
}

在 firefox 中，这将显示选择菜单，然后是难看的 firefox 选择箭头，然后是自定义的好看的箭头。不太理想。

现在，为了在 firefox 中实现这一点，在类“ css-select-moz”中添加 span 元素:

   <span class='css-select-moz'>
<select class='css-select'>
<option value='1'> First option </option>
<option value='2'> Second option </option>
</select>
</span>

然后修改 CSS 以隐藏 mozilla 的脏箭头和-moz- 外观: 窗口，并将自定义箭头丢到 span 类“ CSS-select-moz”中，但只能让它显示在 mozilla 上，像这样:

.css-select {
-moz-appearance:window;
background-image: url('images/select_arrow.gif');
background-repeat: no-repeat;
background-position: right center;
padding-right: 20px;
}


@-moz-document url-prefix() {
.css-select-moz{
background-image: url('images/select_arrow.gif');
background-repeat: no-repeat;
background-position: right center;
padding-right: 20px;
}
}

只是在3小时前偶然发现了这个 bug，感觉很酷(我是网页设计新手，完全是自学的)。然而，这个社区间接地为我提供了这么多的帮助，我认为是时候我回馈一些东西了。

我只在 firefox (mac)版本18和22中测试过它(在我更新之后)。

欢迎任何反馈。

小开

或者，您可以剪辑选择。大致如下:

select { width:200px; position:absolute; clip:rect(0, 170px, 50px, 0); }

这应该剪辑30px 的右侧选择框，剥离箭头。现在提供一个170px 的背景图像和瞧，风格选择

小开

这是一个巨大的黑客，但 -moz-appearance: menulist-text也许可以做到这一点。

小开

更新: 这是在 Firefox v35中修复的。

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

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

在 Windows8，Ubuntu 和 Mac 上测试，最新版本的 Firefox。

实例: http://jsfiddle.net/joaocunha/RUEbp/1/

更多关于这个主题的资料: https://gist.github.com/joaocunha/6273016

小开

这个工作原理(在 Firefox23.0.1上测试) :

select {
-moz-appearance: radio-container;
}

小开

建立在@Jo ãoCunha 的答案之上，这是一种 CSS 风格，对多个浏览器都有用

select {
/*for firefox*/
-moz-appearance: none;
/*for chrome*/
-webkit-appearance:none;
text-indent: 0.01px;
text-overflow: '';
}
/*for IE10*/
select::-ms-expand {
display: none;
}

小开

这里和那里发生了很多讨论，但我没有看到一些适当的解决这个问题的办法。最后编写了一个小的 Jquery + CSS 代码，用于在 IE 和 Firefox 上进行 HACK。

使用 Jquery 计算元素宽度(SELECT 元素)。在选择元素周围添加包装器，并为此元素保持隐藏溢出。确保这个包装的宽度是痘痘。比 SELECT 元素少25px。这可以通过 Jquery 轻松实现。因此，现在我们的图标消失了... ! 现在是时候在 SELECT 元素上添加我们的图像图标了... ! ! ！只要添加一些简单的行添加背景，你都完成了... ! ！确保使用外包装器隐藏溢出,

下面是为 Drupal 编写的代码示例。然而，也可以通过删除少量 Drupal 特定的代码行来使用。

/*
* Jquery Code for Removing Dropdown Arrow.
* @by: North Web Studio
*/
(function($) {
Drupal.behaviors.nwsJS = {
attach: function(context, settings) {
$('.form-select').once('nws-arrow', function() {
$wrap_width = $(this).outerWidth();
$element_width = $wrap_width + 20;
$(this).css('width', $element_width);
$(this).wrap('<div class="nws-select"></div>');
$(this).parent('.nws-select').css('width', $wrap_width);
});
}
};
})(jQuery);

/*
* CSS Code for Removing Dropdown Arrow.
* @by: North Web Studio
*/


.nws-select {
border: 1px solid #ccc;
overflow: hidden;
background: url('../images/icon.png') no-repeat 95% 50%;
}
.nws-select .form-select {
border: none;
background: transparent;
}

解决方案适用于所有浏览器 IE，Chrome 和 Firefox 不需要使用 CSS 添加固定宽度的技巧。这些都是使用 JQuery 动态处理的！

详情请浏览:-http://northwebstudio.com/blogs/1/jquery/remove-drop-down-arrow-html-select-element-using-jquery-and-css

小开

对我来说一个有用的技巧是将(选择)显示设置为 inline-flex。从我的选择按钮中直接切断箭头。不需要所有添加的代码。

只适用于 Fx，而且 Chrome 还需要 -webkit appearance，等等。

小开

我也有同样的问题。在 FF 和 Chrome 上使用它很容易，但是在 IE (8 + ，我们需要支持)上事情就复杂了。我能找到的最简单的解决方案，自定义选择元素的工作“无论我尝试”，包括 IE8，是使用。 customSelect ()

小开

其他答案似乎对我不起作用，但我找到了这个黑客。这对我很有效(2014年7月)

select {
-moz-appearance: textfield !important;
}

在我的例子中，我还有一个 Woocommerce 输入字段，所以我使用了这个

.woocommerce .quantity input.qty {
-moz-appearance: textfield !important;
}

更新了我的答案，显示选择而不是输入

小开

/* Try this in FF30+ Covers up the arrow, turns off the background */
/* still lets you style the border around the image and allows selection on the arrow */




@-moz-document url-prefix() {


.yourClass select {
text-overflow: '';
text-indent: -1px;
-moz-appearance: none;
background: none;


}


/*fix for popup in FF30 */
.yourClass:after {
position: absolute;
margin-left: -27px;
height: 22px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
content: url('../images/yourArrow.svg');
pointer-events: none;
overflow: hidden;
border-right: 1px solid #yourBorderColour;
border-top: 1px solid #yourBorderColour;
border-bottom: 1px solid #yourBorderColour;
}
}

小开

我想我找到了与 FF31兼容的解决方案! ! ！
这里有两个选择，在这个链接中有很好的解释:
Http://www.currelis.com/hiding-select-arrow-firefox-30.html

我使用了选项1: Rodrigo-Ludgero 在 Github 上发布了这个补丁，包括一个在线演示。我在 Firefox 31.0上测试了这个演示，它看起来工作正常。也在 Chrome 和 IE 上进行了测试。下面是 html 代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Custom Select</title>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="custom-select fa-caret-down">
<select name="" id="">
<option value="">Custom Select</option>
<option value="">Custom Select</option>
<option value="">Custom Select</option>
</select>
</div>
</body>
</html>

和 css:

.custom-select {
background-color: #fff;
border: 1px solid #ccc;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0 0 2em;
padding: 0;
position: relative;
width: 100%;
z-index: 1;
}


.custom-select:hover {
border-color: #999;
}


.custom-select:before {
color: #333;
display: block;
font-family: 'FontAwesome';
font-size: 1em;
height: 100%;
line-height: 2.5em;
padding: 0 0.625em;
position: absolute;
top: 0;
right: 0;
text-align: center;
width: 1em;
z-index: -1;
}


.custom-select select {
background-color: transparent;
border: 0 none;
box-shadow: none;
color: #333;
display: block;
font-size: 100%;
line-height: normal;
margin: 0;
padding: .5em;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}


.custom-select select::-ms-expand {
display: none; /* to ie 10 */
}


.custom-select select:focus {
outline: none;
}
/* little trick for custom select elements in mozilla firefox  17/06/2014 @rodrigoludgero */
:-moz-any(.custom-select):before {
background-color: #fff; /* this is necessary for overcome the caret default browser */
pointer-events: none;
z-index: 1; /* this is necessary for overcome the pseudo element */
}

Http://jsbin.com/pozomu/4/edit

对我很有效！

小开

我的造型选择就像这样

<select style="     -moz-appearance: radio-container;
-webkit-appearance: none;
appearance: none;
">

在我测试过的所有版本中，它在 FF、 Safari 和 Chrome 中都可以工作。

在 IE 中，我写道:

 select::-ms-expand {
display: none;
}
/*to remove in all selects*/

你也可以: 你的类:-ms-扩展{ display: none; } . yourid: :-ms-exapan { display: none; }

小开

Jordan Young 的回答是最好的。但是如果你不能或者不想改变你的 HTML，你可以考虑去掉 Chrome、 Safari 等浏览器的自定义向下箭头，留下 Firefox 的默认箭头——但是不会产生双箭头。不理想，但是一个很好的快速修复，不添加任何 HTML，并且不损害您在其他浏览器中的自定义外观。

<select>
<option value='1'> First option </option>
<option value='2'> Second option </option>
</select>

CSS:

select {
background-image: url('images/select_arrow.gif');
background-repeat: no-repeat;
background-position: right center;
padding-right: 20px;
}


@-moz-document url-prefix() {
select {
background-image: none;
}
}

小开

Hackity hack... 一个我测试过的所有浏览器(Safari，Firefox，Chrome)都可以使用的解决方案。没有任何 IE 工程师，所以如果你能测试和注释一下就更好了:

<div class="wrapper">
<select>
<option>123456789</option>
<option>234567890</option>
</select>
</div>

CSS，带有 url 编码的图像:

.wrapper { position:relative; width:200px; }
.wrapper:after {
content:"";
display: block;
position: absolute;
top:1px; height:28px;
right:1px; width:16px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAcCAYAAACH81QkAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowODgwMTE3NDA3MjA2ODExOEE2RENENTU2MTFGMEQ1RCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGNDE5NDQ3Nzc5ODIxMUU0OEU0M0JFMzgzMkUxOTk3MiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGNDE5NDQ3Njc5ODIxMUU0OEU0M0JFMzgzMkUxOTk3MiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDk4MDExNzQwNzIwNjgxMThBNkRDRDU1NjExRjBENUQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDg4MDExNzQwNzIwNjgxMThBNkRDRDU1NjExRjBENUQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4o7anbAAAAjklEQVR42uzUsQ3EIAwFUPty7MBOsAoVC7EVYgyUSFcdzn0iJYquAZGSLxnLzatsWERWGsvGP0QGkc+LxvN9AqGJTKQJMcYQM/+VtbZdiTGKUgr3cxbmlJI0ZiW83vsbgrkjB5JzFq11BdAxdyNICKEi6J25kFKKOOdq70We+JS2ufYTacjyxrKMLtsuwAAznzqGLHX9BwAAAABJRU5ErkJggg==);


pointer-events: none;
}


select {
width: 100%;
padding:3px;
margin: 0;
border-radius: 0;
border:1px solid black;
outline:none;
display: inline-block;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
cursor:pointer;
float:none!important;
background:white;


font-size:13px;
line-height: 1em;
height: 30px;
padding:6px 20px 6px 10px;
}

Http://codepen.io/anon/pen/mypeby

我使用: after-element 来掩盖这个丑陋的箭头。因为 select 不支持: 之后，我需要一个包装器来处理。现在，如果你点击这个箭头，下拉列表就不会注册它... ... 除非你的浏览器支持 pointer-events: none，除了 IE10以外的所有浏览器都支持这个 http://caniuse.com/#feat=pointer-events

所以对我来说它是完美的——一个漂亮、干净、低头痛的解决方案，至少与包括 javascript 在内的所有其他选项相比是这样。

医生:

如果 IE10(或更低)用户点击箭头，它将不工作。工作对我来说足够好..。

小开

继 Joao Cunha 的回答之后，这个问题现在是在 Mozilla 的待办事项列表中，目标是35年以上。

对于那些渴望的人，这里有一个托德 · 帕克(Todd Parker)在库尼亚博客上提到的变通方法，现在仍然有效:

Http://jsfiddle.net/xvushd7x/

HTML:

<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>

CSS:

/* 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;
}

小开

自从 Firefox35，“ -moz-appearance:none”，你已经写在你的代码，最后删除箭头按钮所需要的。

这是一个臭虫解决，因为那个版本。

小开

重要更新:

从 Firefox V35开始，外观属性现在可以工作了! ！

来自 Firefox 在 V35上的官方发布说明:

在组合框中使用带有 none值的 -moz-appearance现在可以删除下拉按钮(bug 649849)。

现在，为了隐藏默认的箭头，只需在 select 元素上添加以下规则即可:

select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

演示

select {
margin: 50px;
border: 1px solid #111;
background: transparent;
width: 150px;
padding: 5px;
font-size: 16px;
border: 1px solid #ccc;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>

小开

如果你不介意摆弄一下 JS，我写了一个小的 jQuery 插件来帮助你。有了它，您不需要担心供应商前缀。

 $.fn.magicSelectBox = function() {
var $e = this;


$e.each(function() {
var $select = $(this);


var $magicbox = $('<div></div>').attr('class', $select.attr('class')).attr('style', $select.attr('style')).addClass('magicbox');
var $innermagicbox = $('<div></div>').css({
position: 'relative',
height: '100%'
});
var $text = $('<span></span>').css({
position: 'absolute'
}).text($select.find("option:selected").text());


$select.attr('class', null).css({
width: '100%',
height: '100%',
opacity: 0,
position: 'absolute'
}).on('change', function() {
$text.text($select.find("option:selected").text());
});


$select.parent().append($magicbox);
$innermagicbox.append($text, $select);
$magicbox.append($innermagicbox);
});


return $e;
};

小提琴: JS 小提琴

条件是您必须从头开始设置选择的样式(这意味着设置背景和边框) ，但是您可能无论如何都要这样做。

此外，由于该函数用 div 替换了原始的 select，因此您将丢失 CSS 中直接在选择选择器上完成的任何样式。因此，给 select 元素一个类并设置类的样式。

支持大多数现代浏览器，如果你想针对老版本的浏览器，你可以尝试老版本的 jQuery，但是可能必须在函数中用 bind ()替换 on ()(未经测试)

小开

试试这个 CSS

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

起作用了