Question

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

.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>

Answer 1

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

＆＃13;

 .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);
}

＆＃13;

<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>

＆＃13;

Answer 3

使用HTML / CSS无法做到这一点。 select元素的颜色是特定于操作系统的，因此无法使用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演示

更改选择框

3 个答案: