How to apply CSS selector on Select Option Child

Question

I only want to apply css selector on select option child value. I have an id applied on the selector. Now I want to apply different css on child 1 child 2 and so on so forth

<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?

Answer 1

Most browsers don't let you do very much styling on the default <select> dropdown menus. That's why libraries like Select2 exist.

More info about styling dropdown menus: https://css-tricks.com/dropdown-default-styling/

Answer 2

That's because you're doing .product.custom-option instead of .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:

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.