html - 将下拉文本的颜色更改为黑色

Question

我有一个 HTML 背景，看起来与图片中的一样。 CSS 代码是:

.custom-dropdown{
-webkit-appearance: none;
margin-left:190px;
-moz-appearance: none; border: 0 !important; 
-webkit-border-radius: 5px; border-radius: 5px; font-size: 14px; 
padding: 10px; width: 35%; cursor: pointer; 
background-size: 40px 37px;
display:none;
/*
color: #fff;
background: #0d98e8 url('http://www.kevinfremon.com/wp-content/uploads/2013/11/drop-down-arrow.png') no-repeat right center;
*/
background: #e2e2e2 url('http://www.kevinfremon.com/wp-content/uploads/2013/11/drop-down-arrow.png') no-repeat right center ;
color: #fff;

}

HTML 是:

 <select id= "dropdownlist" class="custom-dropdown">
    <option>Custom Key</option>
    <option>test</option>
    </select>

现在我想让这些下拉列表的文本(“自定义键”)显示为黑色(不改变背景颜色，因为它与我的模板一样)。 我怎样才能做到这一点？

Answer 1

将 .custom-dropdown 类中的颜色属性从 color:#fff 更改为 color:#000

.custom-dropdown {
  -webkit-appearance: none;
  margin-left: 190px;
  -moz-appearance: none;
  border: 0 !important;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  font-size: 14px;
  padding: 10px;
  width: 35%;
  cursor: pointer;
  background-size: 40px 37px;
  color: #000;

  background: #e2e2e2 url('http://www.kevinfremon.com/wp-content/uploads/2013/11/drop-down-arrow.png') no-repeat right center;
}

<select id="dropdownlist" class="custom-dropdown">
  <option>Custom Key</option>
  <option>test</option>
</select>