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

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 */
    pointer-events: none;
    opacity: 0.65;

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

Disable a dropdown using CSS

Thanks for reading.


  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.