我最近遇到了这种技术来自定义样式一个只有 CSS 的选择标签。

HTML：

<div class="styled-select">
  <select class="the-select">
      <optgroup label="TECHNICIANS">
        <option>Joe Smith</option>
        <option>Joe White</option>
      </optgroup>
      <optgroup label="PRODUCERS">
        <option>Jane Black</option>
        <option>Cindy Gray</option>
      </optgroup>
  </select>
</div>

CSS：

.styled-select {
width: 342px;
    height: 30px;
    overflow: hidden;
    background: url("/img/selectarrow.png") no-repeat right;
    border: none;
    opacity: 0.8;
    background-color: #999999;
 }

.styled-select select {
  background: transparent;
  width: 342px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-top: 5px;
  font-size: 16px;
  border: 0;
  border-radius: 0;
  height: 34px;
  -webkit-appearance: none;
  font-weight: 200;
 font-family: "lato", sans-serif;
 font-size: 18px;
 }


 .styled-select select:focus {
outline: none;
 }

这是一个小提琴：http: //jsfiddle.net/eshellborn/AyDms/

然后确保您为下拉图像获得一张名为“selectarrow”的图片。

如果您只是希望它们清楚地成为标题，请使用用于此目的的标签：<optgroup>. 这也可能有助于您应用 CSS。

<select class="the-select">
  <optgroup label="TECHNICIANS">
    <option>Joe Smith</option>
    <option>Joe White</option>
  </optgroup>
  <optgroup label="PRODUCERS">
    <option>Jane Black</option>
    <option>Cindy Gray</option>
  </optgroup>
</select>

实际上你可以尝试应用 '-webkit-appearance: none;' 供选择。

 select option {
      -webkit-appearance: none;
      
    }

    select option.blue {
      color: blue;
      background-color: green;
    }

    select option.red {
      color: red;
      background-color: gray;
    }

    select option.pink {
      color: pink;
      background-color: yellow;
    }

<select>
      <option class="blue">SomeOption1</option>
      <option class="red">SomeOption2</option>
      <option class="pink">SomeOption3</option>
    <select>