jQuery <select> 元素上“向下箭头”的 CSS？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/458657/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS for the "down arrow" on a <select> element?
提问by bugfixr
Is it possible to stylize the down arrow on a drop down select element? i.e., (<select><option>--></option></select>)
是否可以对下拉选择元素上的向下箭头进行样式化？即， ( <select><option>--></option></select>)
I suspect the answer is no because of the way IE handles that particular element. If there isn't a way, does anyone know of a 'fake' drop down box using javaScript that would mimic that behavior but give me the ability to customize?
我怀疑答案是否定的，因为 IE 处理该特定元素的方式。如果没有办法，有没有人知道使用 javaScript 的“假”下拉框会模仿该行为但让我能够自定义？
采纳答案by Jan Han?i?
Maybe you can use jQuery selectbox replacement. It's a jQuery plugin.
也许您可以使用jQuery 选择框替换。这是一个jQuery插件。
回答by jabram
There's a cool CSS-only solution to styling dropdowns here: http://bavotasan.com/2011/style-select-box-using-only-css/
这里有一个很酷的 CSS-only 样式下拉解决方案：http: //bavotasan.com/2011/style-select-box-using-only-css/
Basically, wrap the select in a container div, style the select to be 18px wider than the container with a transparent background, give overflow:hidden to the container (to chop off the browser-generated arrow), and add your background image with stylized arrow to the container.
基本上，将选择包装在容器 div 中，将选择的样式设置为比具有透明背景的容器宽 18px，将溢出：隐藏到容器（以切断浏览器生成的箭头），并添加带有风格化的背景图像指向容器的箭头。
Doesn't work in IE7 (or 6), but seriously, I say if you're using IE7 you deserve a less-pretty dropdown experience.
在 IE7（或 6）中不起作用，但说真的，我说如果你使用 IE7，你应该得到一个不太漂亮的下拉体验。
回答by Ty.
No, the down arrow is a browser element. It's built in [and different] in every browser. You can, however, replace the select box with a custom drop down box using javascript.
不，向下箭头是浏览器元素。它内置于每个浏览器中[并且不同]。但是，您可以使用 javascript 将选择框替换为自定义下拉框。
Jan Hancic mentioned a jQuery plugin to do just that.
Jan Hancic 提到了一个 jQuery 插件来做到这一点。
回答by Neil Barnwell
You can't style combos very well using CSS.
使用 CSS 无法很好地设计组合样式。
The guys at FogBugz made a pretty good custom combo using JavaScript, so it is possible, it just takes a lot of work to get it right.
FogBugz 的人使用 JavaScript 制作了一个非常好的自定义组合，所以这是可能的，只需要做很多工作就可以做到。
Better to stick with the standard one for version 1, then see if it's worth updating it once your app is in the wild.
最好坚持使用版本 1 的标准版本，然后看看是否值得在您的应用程序投入使用后对其进行更新。
回答by Diodeus - James MacFarlane
The drop-down is platform-level element, you can't apply CSS to it.
下拉菜单是平台级元素，您不能对其应用 CSS。
You can overlay an image on top of it using CSS, and call the click event in the element beneath.
你可以使用 CSS 在它上面叠加一个图像，并在下面的元素中调用 click 事件。
回答by wvanbergen
I don't know if it is stylable with CSS (probably not in IE), but please: do not use a "fake" drop-down box using javascript, because the usability of these things usually is horrible. Among other things, keyboard navigation is usually absent.
我不知道它是否可以用 CSS 样式化（可能不是在 IE 中），但是请：不要使用使用 javascript 的“假”下拉框，因为这些东西的可用性通常很糟糕。除此之外，通常没有键盘导航。
回答by MayhemBliz
You can achieve this with just CSS and your down arrow as an image positioned absolute with a "pointer-events: none;" see my example below:
您可以仅使用 CSS 和向下箭头作为使用“pointer-events: none;”绝对定位的图像来实现这一点。看我下面的例子：
<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;
}
回答by rubbermind
Try this
尝试这个
<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>
回答by marsupial
This will change inputs, select etc to the old style grey not sure if you can manipulate after that:
In <head>put:
这会将输入，选择等更改为旧样式灰色，不确定您是否可以在此之后进行操作：输入<head>：
<meta http-equiv="MSThemeCompatible" content="NO">
回答by localshred
You would need to create your own dropdown using hidden divs and a hidden input element to record which option was "selected". My guess is that @Jan Hancic's link he posted is probably what you're looking for.
您需要使用隐藏的 div 和隐藏的输入元素创建自己的下拉列表，以记录“选择”了哪个选项。我的猜测是他发布的@Jan Hancic 的链接可能就是您要查找的内容。
