What can cause an input checkbox to match css read-only style?

Question

I have a checkbox in a form. I just noticed that it looked insensitive. It's not, but it is being styled by a css expression:

input:read-only

In the DOM inspector, there is no readonly attribute on the element, and I in fact don't even use that attribute in my application.

The CSS probably included that via cut and paste from somewhere. For now, I just removed it from the CSS. But clearly there's something going on that I don't fully comprehend.

What can cause an input checkbox to match css read-only style if the attribute isn't present?

Does this answer your question? [Why is :read-only CSS pseudo-class being applied on this checkbox?](https://stackoverflow.com/questions/70375526/why-is-read-only-css-pseudo-class-being-applied-on-this-checkbox) — Dai, Apr 08 '22 at 15:16
**TL;DR:** it's because _almost all HTML elements_ are `:read-only` by default, including `checkbox` and `radio` input elements (as their `.value` DOM property never changes, only their `.checked` DOM property does - whereas `text` inputs are an exception). This is explained in the linked-close-as-duplicate answer. — Dai, Apr 08 '22 at 15:18

score 0 · Answer 1 · answered Apr 08 '22 at 15:18

See the specification:

The :read-write pseudo-class must match any element falling into one of the following categories, which for the purposes of Selectors are thus considered user-alterable: [SELECTORS]

input elements to which the readonly attribute applies, and that are mutable (i.e. that do not have the readonly attribute specified and that are not disabled)

textarea elements that do not have a readonly attribute, and that are not disabled

elements that are editing hosts or editable and are neither input elements nor textarea elements

The :read-only pseudo-class must match all other HTML elements.

A checkbox is an input but the readonly attribute does not apply so the first bullet point doesn't match. It isn't a textarea so the second doesn't match. It is an input so the third doesn't match.

Therefore The :read-only pseudo-class must match all other HTML elements. applies.

score -2 · Answer 2 · answered Apr 07 '22 at 20:00

-2

The readonly attribute is a boolean attribute.

When present, it specifies that an input field or textarea is read-only.

A read-only field cannot be modified (however, a user can tab to it, highlight it, and copy the text from it).

The readonly attribute can be set to keep a user from changing the value until some other conditions have been met (like selecting a checkbox, etc.). Then, a JavaScript can remove the readonly value, and make the input field editable.

<input type="text" id="country" name="country" value="Norway" readonly>

Source: W3Schools

answered Apr 07 '22 at 20:00

BGP100

61
5

1

I know what it is and what it does. What I don't understand is why CSS thinks that my element has the readonly attribute when it does not. – Chris Harrington Apr 07 '22 at 20:35
did you arleast read the text? it says “cannot be modified” (3rd line) – BGP100 Apr 07 '22 at 21:45
Did you read my comment? – Chris Harrington Apr 07 '22 at 23:10
W3Schools.com is not an authoritative source. Instead please link to either the W3C/WHATWG specifications directly, or an engine-vendor's site (web.dev, MDN, MSDN, etc). – Dai Apr 08 '22 at 15:16

fnostro · Answer 3 · 2022-04-07T20:05:28.373

-2

Well, if it's just a styling rule it need only exist. It's not uncommon to style an input element based on the readonly property. And often there is code that changes input state based on other requirements

$(function() {
  $('button').click(function() {
    let f = $('#input2').prop('readonly');
    $('#input2').prop('readonly', !f);
  });
});

input {
  border: 1px solid blue;
}

input:read-only {
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <input id="input1" />
  <br>
  <button>Toggle</button>
  <br>
  <input id="input2" readonly/>
</div>

edited Apr 07 '22 at 20:05

answered Apr 07 '22 at 20:02

fnostro

4,531
1
15
23

I didn't set the readonly property. And it's not present in the DOM inspector. Yet CSS rules are saying that it's present. – Chris Harrington Apr 07 '22 at 23:11
there are CSS styles and DOM element properties. it might be possible to set the element property but not see it in the style attributes perhaps? Can you maybe screenshot what you see in the inspector? – fnostro Apr 08 '22 at 02:10
I've added a screenshot of the inspector with the input element selected. – Chris Harrington Apr 08 '22 at 15:11
the css we knew about, I was wondering about the DOM element behind it. After you select the input element take a look at `$0.readOnly` – fnostro Apr 08 '22 at 21:06
I just read this which Stackoverflow auto-liked to: https://stackoverflow.com/questions/70375526/why-is-read-only-css-pseudo-class-being-applied-on-this-checkbox It clears things up a bit. But I still don't understand why it's only applying to some checkboxes. – Chris Harrington Apr 10 '22 at 18:33

What can cause an input checkbox to match css read-only style?

3 Answers3