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

Question

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

cssdrop-down-menu

75

我想改变下拉列表箭头的默认外观，使其在各种浏览器中看起来相同。有没有一种方法可以使用CSS或其他方式覆盖下拉箭头的默认外观和感觉？

- Iris

10个回答

21

不，要为所有浏览器正确实现跨浏览器表单定制非常困难，甚至是不可能的。如果您真的关心这些小部件的外观，您应该使用JavaScript实现。

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

- Tomh

20

这可以通过以下方式实现：

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>

- Lambder

你会如何使用这个方法自定义颜色？ - jbodily

使用不同的背景SVG。 - Lambder

你是怎么获取SVG数据的？@Lambder - karinapichardo

1

@karinapichardo https://yoksel.github.io/url-encoder/ - Lambder

谢谢@Lambder，对于任何想知道的人，我发现这个链接非常有帮助 https://dev59.com/pWYq5IYBdhLWcg3wxTSq - karinapichardo

3

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

您需要使用自己的 DIV 来模拟并覆盖现有元素，或者构建自己的控件以模拟相同的功能。

- Diodeus

1

我们使用了YUI、Chosen，并且目前正在使用jQuery Select2插件：https://select2.github.io/。它非常强大，箭头只是冰山一角。

一旦需要使用样式化选择器，我同意其他人的观点，使用插件。不要费力地重新发明轮子。

- sb333

1

恐怕这并不容易。问题在于 CSS 无法替换 select 中的箭头，因为它是由浏览器渲染的。但是您可以使用 div 和 input 元素以及 JavaScript 构建一个新的控件，以执行与 select 相同的功能。

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

否则，在此处有关于 select 元素的一些信息：

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

- Richard

0

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

这里有一篇关于这个主题的好文章：<select> Something New

- Chad Birch

-1

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

- Bojan

-1

只需使用CSS更改background-image属性。

- Hosein

-1

除非你计划创建自己的下拉列表（而不是使用标准库的下拉列表），否则你就卡住了。DDL控件的外观将基于你正在运行的系统和/或呈现输出的浏览器。

- TheTXI

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sphvn · Accepted Answer

你可以用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>