改变下拉箭头的颜色和外观

我想更改下拉列表的箭头的默认外观,以便在浏览器中看起来相同。 有没有办法来覆盖使用CSS或其他方式的下拉箭头的默认外观?

你可以用CSS实现这一点,但是你并不是在技术上改变箭头本身。

在这个例子中,我实际上隐藏了默认的箭头,而是显示了我自己的箭头。

HTML:

<div class="styleSelect"> <select class="units"> <option value="Metres">Metres</option> <option value="Feet">Feet</option> <option value="Fathoms">Fathoms</option> </select> </div> 

CSS:

 .styleSelect select { background: transparent; width: 168px; padding: 5px; font-size: 16px; line-height: 1; border: 0; border-radius: 0; height: 34px; -webkit-appearance: none; color: #000; } .styleSelect { width: 140px; height: 34px; overflow: hidden; background: url("images/downArrow.png") no-repeat right #fff; border: 2px solid #000; } 

不,跨浏览器forms的自定义是非常困难的,如果不是所有浏览器都不可能的话。 如果你真的关心这些小部件的外观,你应该使用一个JavaScript实现。

请参阅http://www.456bereastreet.com/archive/200409/styling_form_controls/和http://developer.yahoo.com/yui/examples/button/btn_example07.html

它可以通过以下方式完成:

 select{ background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 100% 50%; } 
 select{ background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 100% 50%; -moz-appearance: none; -webkit-appearance: none; -webkit-border-radius: 0px; appearance: none; outline-width: 0; padding: 10px 10px 10px 5px; display: block; width: 10em; border: none; font-size: 1rem; border-bottom: 1px solid #757575; } 
 <div class="styleSelect"> <select class="units"> <option value="Metres">Metres</option> <option value="Feet">Feet</option> <option value="Fathoms">Fathoms</option> </select> </div> 

<select>元素由应用程序生成,样式不是CSS / HTML规范的一部分。

你必须用你自己的DIV伪装它,并把它覆盖在现有的DIV之上,或者build立你自己的控制模拟相同的function。

不,你不能通过使用实际的<select> ,但是有一些技术可以让你用看起来更好的javascript解决scheme“replace”它们。

这里有一个很好的文章: <select> Something New

恐怕不容易做到。 问题是因为这是由浏览器呈现的,Css不能replaceselect中的箭头。 但是你可以从div和input元素和Javascript构build一个新的控件来执行与select相同的function。

例如,尝试查看一些Jquery的自动完成插件。

否则,在这里select元素有一些信息:

http://www.devarticles.com/c/a/Web-Style-Sheets/Taming-the-Select/

除非你打算创build你自己的下拉列表(而不是使用标准库下拉列表),否则你会被卡住。 DDL控件的外观将基于您正在运行的系统和/或呈现输出的浏览器。

我们使用了YUI,Chosen,并且正在使用jQuery Select2插件: https : //select2.github.io/

它非常强大,箭头只是冰山一angular。

只要程式化的select成为一个要求,我同意其他人,去插件。 不要自杀,重新发明轮子。

尝试将“border-top”属性的颜色更改为白色