How to Disable a Dropdown using CSS?

To disable a dropdown in CSS, you can use the pointer-events property. The pointer-events property is used to enable or disable various mouse events such as hover, click, drag, etc. on HTML elements.

So, if you want to disable a select dropdown with CSS, you have to just set the pointer-events property to none. This will disable all kinds of mouse events on the dropdown.

You can also reduce the opacity of the dropdown using the opacity property so that the disabled dropdown should look different than the normal dropdowns.

Let’s say, we have the following dropdown with class="disabled" in our HTML file:

<select class="disabled">
    <option>HTML</option>
    <option>CSS</option>
    <option>JavaScript</option>
    <option>Bootstrap</option>
    <option>Angular</option>
</select>

Now, to disable this dropdown we will simply set the pointer-events property to none in our CSS file.

Something like this:

/* Disable the dropdown */
.disabled{
    pointer-events: none;
    opacity: 0.65;
}

This is how the dropdown will look like after applying the above styles:

Thanks for reading.