html - 如何在 HTML 中设置特定选择选项的样式

Question

这是我的代码:

<select>
  <option>
    PRODUCT CATALOUGE
  </option>

  <option>
    VACUUM COMPONENTS
  </option>

  <option>
    VALVE COMPONENTS
  </option>

  <option>
    ROUGHING COMPONENTS
  </option>

  <option>
    VACUUM MEASUREMENT
  </option>

  <option>
    GLASS COMPONENTS
  </option>

  <option>
    ELECTRICAL FEEDTHROUGHS
  </option>

  <option>
    MOTION AND MANIPULATION
  </option>

  <option>
    THIN FILM PRODUCTS
  </option>
</select>

这里是我的 CSS:

select { 
  margin: 10px;
  padding: 10px; 

  width: 220px;
  text-indent: 27px;
  font-family: Palatino Linotype;
  font-size: 15px;
  -moz-appearance: none;
  -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #2961c1 inset;
  box-shadow: 0 3px 0 #ccc, 0 -1px #2961c1 inset;

  position:absolute; top: 10%; left: 2%;
}

这段代码实际上工作正常，但我想使用选择选项创建一个新的下拉列表，但我想以不同的方式设置它的样式。我尝试使用 div 标签并在外部样式表中设置 ID，但这不起作用。我该如何为特定的选择功能设置样式？

例如#select 还是我需要使用类？

Answer 1

<select id="one">
  <option>
    PRODUCT CATALOUGE
  </option>

  ...

  <option>
    THIN FILM PRODUCTS
  </option>
</select>

<select id="two">
  <option>
    PRODUCT CATALOUGE
  </option>

  ...

  <option>
    THIN FILM PRODUCTS
  </option>
</select>

这是一个有效的 fiddle : https://jsfiddle.net/e63fzbkt/

您也可以使用类代替 ID。