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?

CodePudding user response：

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

CodePudding user response：

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>