更改选择框中箭头的颜色答案

【问题标题】：change the color of the arrow in select box更改选择框中箭头的颜色
【发布时间】：2017-09-13 17:27:08
【问题描述】：

我想将选择框的颜色从白色更改为紫色我更改了选择框的颜色但只更改了文本而不是箭头。我想更改箭头的颜色。我想更改箭头颜色到边框颜色（紫色）

.views-widget select {
	border:1px solid #9b8aa8;
	background-color: #8b3ca8;
	color:#9b8aa8;
	height:30px;
	font-size:10pt;
	width: 199px;
  margin-left: 13px;
  padding: 0 5px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.views-widget {
  width: 199px;
  position: relative;
}

.views-widget::before {
    content: '';
    display: block;
    border: 5px solid transparent;
    border-top-color: #fff;
    position: absolute;
    right: 0px;
    top: calc(50% - 2px);
}

<div class="views-widget">
<select id="edit-field-perspective-menu-tid" name="field_perspective_menu_tid" class="form-select">
  <option value="All" selected="selected">-Success Stories-</option>   <option value="1">Blogs</option>
  <option value="2">Case Studies</option>
  <option value="3">Videos</option>
  <option value="4">White Papers</option>
</select>
</div>

【问题讨论】：

Change color and appearance of drop down arrow的可能重复

标签： html css

【解决方案1】：

我添加了一些 CSS 来帮助你实现你想要的。您可以使用 css 来获得所需的结果。

select {

  /* make arrow and background */

  background:
    linear-gradient(45deg, transparent 50%, blue 50%),
    linear-gradient(135deg, blue 50%, transparent 50%),
    linear-gradient(to right, skyblue, skyblue);
  background-position:
    calc(100% - 21px) calc(1em + 2px),
    calc(100% - 16px) calc(1em + 2px),
    100% 0;
  background-size:
    5px 5px,
    5px 5px,
    2.5em 2.5em;
  background-repeat: no-repeat;

  /* styling and reset */

  border: thin solid blue;
  font: 300 1em/100% "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5em;
  padding: 0.5em 3.5em 0.5em 1em;

  /* reset */

  border-radius: 0;
  margin: 0;      
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance:none;
  -moz-appearance:none;
}

<div class="views-widget">
<select id="edit-field-perspective-menu-tid" name="field_perspective_menu_tid" class="form-select">
  <option value="All" selected="selected">-Success Stories-</option>   <option value="1">Blogs</option>
  <option value="2">Case Studies</option>
  <option value="3">Videos</option>
  <option value="4">White Papers</option>
</select>
</div>

【讨论】：

【解决方案2】：

 .views-widget select {
    	border:1px solid #9b8aa8;
    	background-color: #8b3ca8;
    	color:#9b8aa8;
    	height:30px;
    	font-size:10pt;
    	width: 199px;
      margin-left: 13px;
      padding: 0 5px;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
    }

    .views-widget {
      width: 199px;
      position: relative;
    }

    .views-widget::before {
    content: '';
    display: block;
    border: 5px solid transparent;
    border-top-color: #3ca87b;   /*change in this line color*/  
    position: absolute;
    right: 0px;
    top: calc(50% - 2px);
}

<div class="views-widget">
    <select id="edit-field-perspective-menu-tid" name="field_perspective_menu_tid" class="form-select">
      <option value="All" selected="selected">-Success Stories-</option>   <option value="1">Blogs</option>
      <option value="2">Case Studies</option>
      <option value="3">Videos</option>
      <option value="4">White Papers</option>
    </select>
    </div>

【讨论】：

【解决方案3】：

HTML/CSS 无法做到这一点。选择元素的颜色是特定于操作系统的，因此不能使用 CSS 或 HTML 更改。 Javascript 解决方案已经开发出来，它们是（到目前为止）唯一的方法:)

在 Firefox 中，您可以使用 css background-image 属性和 :checked CSS 伪类选择器来实现它。

option:checked, option:hover {
 color: white;
 background: #488f8f repeat url("mycolor.gif");
}

你可以在我的网站 www.speich.net 上找到一个不同颜色的 css 演示

【讨论】：