[英]How to apply CSS selector on Select Option Child
I only want to apply css selector on select option child value. 我只想在选择选项子值上应用css选择器。 I have an id applied on the selector.
我在选择器上应用了一个ID。 Now I want to apply different css on child 1 child 2 and so on so forth
现在我想对孩子1和孩子2应用不同的CSS,依此类推
<select name="options[81]" id="select_81" class=" required-entry product-custom-option">
<option value="">-- Please Select --</option>
<option value="229" price="0">ariel </option>
<option value="230" price="0">times new roman </option>
</select>
now I have tried these selectors but nothing works 现在我已经尝试了这些选择器,但没有任何效果
select#select_81.required-entry.product.custom-option:nth-child(2){
font-family:'Arial';
}
select#select_81.required-entry.product.custom-option:nth-child(3){
font-size:30px;
font-weight:800;
}
#select_81.required-entry.product.custom-option:nth-child(3){
font-size:30px;
font-weight:800;
}
#select_81:nth-child(3){
font-size:30px;
font-weight:800;
}
select#select_81option:nth-child(2), option:nth-child(3) {
font-weight:bold;
}
How can we do this by using CSS? 我们如何使用CSS做到这一点?
Most browsers don't let you do very much styling on the default <select>
dropdown menus. 大多数浏览器不允许您在默认的
<select>
下拉菜单上进行很多样式设置。 That's why libraries like Select2 exist. 这就是为什么存在像Select2这样的库的原因。
More info about styling dropdown menus: https://css-tricks.com/dropdown-default-styling/ 有关样式下拉菜单的更多信息: https : //css-tricks.com/dropdown-default-styling/
That's because you're doing .product.custom-option
instead of .product-custom-option
. 那是因为您正在执行
.product.custom-option
而不是.product-custom-option
。
But your code doesn't need to be that complicated. 但是您的代码不必那么复杂。
To answer your question, to select the nth option, use the :nth-child()
selector: 要回答您的问题,请使用
:nth-child()
选择器选择第n个选项:
select#select_81 option:nth-child(1) {}
select#select_81 option:nth-child(2) {}
select#select_81 option:nth-child(3) {}
select#select_81 option:nth-child(4) {}
select#select_81 option:nth-child(5) {}
...
But you can't really style the options inside a select dropdown; 但是您不能真正在选择下拉菜单中设置选项的样式。 the system normally gives it default styling that you can't change.
系统通常会提供您无法更改的默认样式。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.