这是我的代码:
<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 还是我需要使用类?
最佳答案
<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。
关于html - 如何在 HTML 中设置特定选择选项的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33257786/