How to apply readonly in a select input
In this article we will learn how to apply readonly in a select, that is, make it impossible to have its options selected.

What’s up programmer, ok? Let’s learn something new!
The readonly attribute doesn’t work in select by itself, we need to make a few more tweaks so that the behavior is what we want
So let’s build an example HTML structure:
<form> <select> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> </form>
This is the return in the browser:
Okay, now the input is enabled, let’s make the necessary changes to make it readonly:
<select tabindex="-1" aria-disabled="true">
Firstly in HTML, let’s add tabindex=”-1″, not allowing users to access the field via tab key
Then aria-disable=”true”, a way of informing that this field is disabled for screen readers, thinking about accessibility
Now in CSS:
select { background: #EEE; pointer-events: none; touch-action: none; }
Here we include a gray background, to give the appearance of a readonly field, just as a visual effect
Then we remove the click and touch effects (mobile), with pointer-events: none and touch-action: none
Ready, our select readonly is ready, see how it turned out:
Remembering that there must be more ways to apply readonly in a select, but this one is very simple and effective
And mainly without fix-its, using only native resources of HTML and CSS languages
Conclusion
In this article we learned how to leave a select as a readonly input
It was necessary to change the HTML a little for accessibility reasons and also for the possibility of accessing it with the tab
Want to leran more HTML? Click here!