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

我想更改下拉列表箭头的默认外观，使其在不同浏览器中看起来一样。有没有办法用 CSS 或其他方法覆盖下拉箭头的默认外观？

292241 次浏览
小开

不，跨浏览器的表单自定义是非常困难的，如果不是不可能得到它的权利，为所有浏览器。如果您真的关心这些小部件的外观，那么您应该使用 javascript 实现。

详情请参见: http://www.456bereastreet.com/archive/200409/styling _ form _ control/”rel = “ norefrer”> http://www.456bereastreet.com/archive/200409/styling_form_controls/ 以及一个 http://developer.yahoo.com/yui/examples/button/btn_example07.html

小开

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

您必须使用您自己的 DIV 来伪造它，并将其覆盖在现有的 DIV 之上，或者构建您自己的控件来模拟相同的功能。

小开

不，你不能通过使用一个实际的 <select>来实现，但是有一些技术可以让你用看起来更好的 javascript 解决方案来“替换”它们。

这里有一篇关于这个主题的好文章: < 选择 > 新事物

小开

除非您计划创建自己的下拉列表(并且不使用标准库下拉列表) ，否则您将陷入困境。DDL 控件的外观将基于您正在运行的系统和/或呈现输出的浏览器。

小开

恐怕不容易。问题是 CSS 无法替换选择中的箭头，因为这是由浏览器呈现的。但是您可以从 div 和 input 元素以及 Javascript 构建一个新的控件来执行与 select 相同的功能。

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

否则，这里有一些关于 select 元素的信息:

Http://www.devarticles.com/c/a/web-style-sheets/taming-the-select/

小开

您可以使用 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;
-moz-appearance: none;
appearance: none;
color: #000;
}


.styleSelect {
width: 140px;
height: 34px;
overflow: hidden;
background: url("images/downArrow.png") no-repeat right #fff;
border: 2px solid #000;
}
<div class="styleSelect">
<select class="units">
<option value="Metres">Metres</option>
<option value="Feet">Feet</option>
<option value="Fathoms">Fathoms</option>
</select>
</div>

小开

我们已经使用了 YUI、 Chosen，目前正在使用 jQuerySelect2插件: https://select2.github.io/

非常结实，箭头只是冰山一角。

一旦程序化的选择成为一个需求，我同意其他人的意见，使用一个插件。别自寻重造轮子。

小开

它可以通过以下方式实现:

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>

小开

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

小开

只需改变 CSS 的背景图像属性。


提交答案