Faux-disabled fields in HTML forms

You want to prevent input to a form field, but all the solutions have side effects:

• The [readonly] attribute is only available for text fields, but not for checkboxes, selects, buttons, etc.
• The [disabled] attribute is available for all kinds of fields, but will no longer include the field value in the submitted form data.
• pointer-events: none still allows keyboard input, and does not indicate disabledness visually, or to screen readers.

Yet another tool is to use the [inert] attribute Show archive.org snapshot :

Copy<select inert name="foo">...</select>

Copy[inert] {
  opacity: 0.5;
  filter: grayscale(100%);
}

Unfortunately this solution also has a caveat for accessibility: Screen readers will no longer see the field at all. Depending on your requirements, you may prefer screen readers to announce the field as present, but disabled.

See also

• Preventing interactivity on elements using HTML or CSS
• Non-interactive Elements with the inert attribute Show archive.org snapshot