Why does :read-only selector affect elements which do not have readonly attribute?

Question

I have the following code:

<div class="form-group">
   <div class="check-box">
      <input class="form-control input-text checkbox" data-val="true" data-val-required="The Contact Branch Specific Email field is required." id="UseBranchSpecificContact" name="UseBranchSpecificContact" type="checkbox" value="true"><input name="UseBranchSpecificContact" type="hidden" value="false">
      <label for="UseBranchSpecificContact">Contact Branch Specific Email</label>
   </div>
</div>

Which displays the following checkbox:

The checkbox is displayed using the following CSS:

.check-box label:before {
    position: absolute;
    left: 0;
    top: 2px;
    border: 1px solid #dcdde3;
    content: '';
    font-family: FontAwesome;
    line-height: 14px;
    color: #3d4964;
    font-size: 11px;
    text-align: center;
    cursor: pointer;
    display: block;
    width: 16px;
    height: 16px;
}

So the actual checkbox (input) is hidden and the above CSS adds a checkbox before the label. This is all working as expected.

I wanted to add an extra CSS class to change the color of displayed checkbox to light grey, if the label has readonly attribute. So I have added the following CSS:

.check-box label:read-only:before {
    background-color: #eeeeee;
}

But the problem is the above CSS affects the labels which do not have readonly attribute as well, I am not understanding why is that?

score 1 · Accepted Answer · answered Jan 07 '21 at 06:34

'Label' doesn't have 'readonly' attribute. As well, 'readonly' doesn't work with checkbox input type. You can use 'disabled' for checkbox.

var button = document.getElementById("toggleBtn");
var input = document.getElementById("UseBranchSpecificContact");

button.addEventListener("click", function(){
  input.toggleAttribute("disabled");
});

.check-box label:before {
    position: absolute;
    left: 0;
    top: 2px;
    border: 1px solid #dcdde3;
    content: '';
    font-family: FontAwesome;
    line-height: 14px;
    color: #3d4964;
    font-size: 11px;
    text-align: center;
    cursor: pointer;
    display: block;
    width: 16px;
    height: 16px;
}

.check-box input:disabled ~ label:before {
    background-color: red;
}

<div class="form-group">
   <div class="check-box">
      <input class="form-control input-text checkbox" data-val="true" data-val-required="The Contact Branch Specific Email field is required." id="UseBranchSpecificContact" name="UseBranchSpecificContact" type="checkbox" value="true">
     <input name="UseBranchSpecificContact" type="hidden" value="false">
      <label for="UseBranchSpecificContact">Contact Branch Specific Email</label>
   </div>
</div>

<button id="toggleBtn">Toggle Disable</button>

Ref: Can HTML checkboxes be set to readonly?

Yuriy Piskunov · Answer 2 · 2021-01-07T06:11:52.107

0

Tag 'label' doesn't have 'readonly' attribute. See html spec. If you want to change color of label, when input has 'readonly' attribute, than: .check-box input[readOnly] + label { ... }

edited Jan 07 '21 at 06:11

answered Jan 07 '21 at 06:04

Yuriy Piskunov

1,064
8
12

Thanks, it would help if you could provide any reference/source – Hooman Bahreini Jan 07 '21 at 06:07
might be good to also point out that `:read-only` actually is `:not(:read-write)`, i.e all non editable elements do match. – Kaiido Jan 07 '21 at 06:13

Why does :read-only selector affect elements which do not have readonly attribute?

2 Answers2