6

I am trying to make readonly, but not disable, all types of form element only using css and html (i.e. no javascript).

Some things (like inputs) are easy - the readonly attribute on the input does it. For other things, like checkboxes and selects for example, readonly doesn't work. I can use css pointer-events: none to prevent clicking on it, but I haven't found a keyboard-events: none or similar that I can use to stop people getting to it with the keyboard and changing it.

I know of several ways to achieve this with javascript, but I'm hoping to find one that is javascript free.

Improve this question
2
  • 3
    tabindex="-1" attribute Commented Aug 20, 2022 at 18:34
  • 1
    The tabindex solution is bad. The user (think of a screen reader user) needs to know the control is there, needs to be able to land on it whether or not it's supposed to be enabled at the moment. The traditional disabled attribute is bad for accessibility. Commented Jan 13 at 22:57
Related questions
1
Are there any pre-built Javascripts for checking keyboard/mouse activity?
159
css 'pointer-events' property alternative for IE
36
How to grab keyboard events on an element which doesn't accept focus?
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.