用于“select”元素上的“向下箭头”的CSS？
是否有可能风格化下拉select元素上的向下箭头？ 即（ <select><option>--></option></select> ））
我怀疑答案是否定的，因为IE处理特定元素的方式。 如果没有办法，有没有人知道一个“假”的下拉框使用javaScript将模仿的行为，但给我的能力来定制？
也许你可以使用jQuery selectboxreplace 。 这是一个jQuery插件。
这里有一个很酷的纯CSS的解决scheme： http : //bavotasan.com/2011/style-select-box-using-only-css/
基本上，将select包装在一个容器div中，将select的样式设置为比具有透明背景的容器宽18px，给溢出：隐藏到容器（切断浏览器生成的箭头），然后添加背景图像箭头到容器。
在IE7（或6）不起作用，但严重的是，我说如果你使用IE7，你应该得到一个不太漂亮的下拉体验。
不，下箭头是一个浏览器元素。 它是在每个浏览器内build[和不同的]。 但是，您可以使用javascriptreplace具有自定义下拉框的select框。
Jan Hancic提到了一个jQuery插件来做到这一点。
下拉菜单是平台级别的元素，不能对其应用CSS。
您可以使用CSS覆盖图片顶部，并在下面的元素中调用click事件。
你不能使用CSS很好地devise组合。
FogBugz的人使用JavaScript做了一个非常好的自定义组合，所以这是可能的，只是需要很多工作才能把它做好。
更好地坚持使用标准的版本1，然后看看是否值得更新它，一旦你的应用程序在野外。
我不知道它是不是用CSS（可能不是在IE）中的样式，但请：不要使用JavaScript的“假”下拉框，因为这些东西的可用性通常是可怕的。 除此之外，键盘导航通常是不存在的。
你可以用CSS和你的向下箭头作为一个图像定位绝对与“指针事件：无;” 看我下面的例子：
<select> <option value="1">1 Person</option> <option value="2">2 People</option> </select> <img class="passthrough" src="downarrow.png" /> .passthrough { pointer-events: none; position: absolute; right: 0; }
您将需要创build自己的下拉菜单，使用隐藏的div和隐藏的input元素来logging哪个选项被“选中”。 我的猜测是，他发布的@Jan Hancic的链接可能是你正在寻找的。
尝试这个
<div style='position:relative;left:0px;top:0px; onMouseOver=document.getElementById('visible').style.visibility='visible' id='hidden'>10 <select style='position:absolute;left:0px;top:0px;cursor:pointer;visibility:hidden;' onMouseOut=document.getElementById('visible').style.visibility='hidden' onChange='this.form.submit()' id='visible' multiple size='3'>"; <option selected value=10>10</option> <option value=20>20</option> <option value=50>50</option> </select> </div>
这将改变input，select等旧式灰色不知道你是否可以操纵之后：在<head>放：
<meta http-equiv="MSThemeCompatible" content="NO">
http://jsfiddle.net/u3cybk2q/2/检查Windows，iOS和Android（iexplorer补丁）;
.styled-select select { background: transparent; width: 240px; padding: 5px; font-size: 16px; line-height: 1; border: 0; border-radius: 0; height: 34px; -webkit-appearance: none; } .styled-select { width: 240px; height: 34px; overflow: visible; background: url(http://nightly.enyojs.com/latest/lib/moonstone/dist/moonstonehttp://img.dovov.comcaret-black-small-down-icon.png) no-repeat right #FFF; border: 1px solid #ccc; } .styled-select select::-ms-expand { display: none; /*patch iexplorer*/ }
<div class="styled-select"> <select> <option>Here is the first option</option> <option>The second option</option> </select> </div>
