改变下拉箭头的颜色和外观
我想更改下拉列表的箭头的默认外观，以便在浏览器中看起来相同。 有没有办法来覆盖使用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实现。
它可以通过以下方式完成：
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”属性的颜色更改为白色
