CODEWITHSUNDEEP
cssinternet-explorercss-selectors
Brøgger
Brøgger

Reputation: 25

CSS :read-only selector - Disrupts :disabled in IE 11

I experience, that adding a CSS selector including :read-only will make the other CSS selectors not work in Internet Explorer.

textarea {
  margin: 5px;  
}

textarea.ok_class:disabled, 
textarea.ok_class:disabled {
  border: 1px solid green;
}

textarea.not_ok_class:read-only,
textarea.not_ok_class:disabled,
textarea.not_ok_class:disabled {
  border: 1px solid red;
}
<textarea name="ta_1" disabled class="ok_class">Without read-only 1</textarea>
<br>
<textarea name="ta_2" disabled class="ok_class">Without read-only 2</textarea>
<br>
<textarea name="ta_3" disabled class="not_ok_class">With read-only 1</textarea>
<br>
<textarea name="ta_4" disabled class="not_ok_class">With read-only 2</textarea>

With the above, the border is not red for the disabled textareas with the not_ok_class class.

This is only a problem in Internet Explorer (tested in v. 11). In Chrome it is working as expected.

Removing the line textarea.not_ok_class:read-only, will make it work in IE.

Why is the :read-only pseudo selector disrupting the other CSS selectors? What am i missing?

Thanks in advance

Upvotes: 1

Views: 2584

Answers (1)

James Donnelly
James Donnelly

Reputation: 128766

The issue you're having is that IE doesn't understand the :read-only selector and instead of simply ignoring that one selector it invalidates the entire block.

A workaround is to separate the :read-only selector into it's own block. This seems a bit pointless, but it's the only way you're going to get IE to not proceed to invalidate the :disabled selectors as well:

textarea {
  margin: 5px;  
}

textarea.ok_class:disabled, 
textarea.ok_class:disabled {
  border: 1px solid green;
}

textarea.not_ok_class:read-only {
  border: 1px solid red;
}

textarea.not_ok_class:disabled,
textarea.not_ok_class:disabled {
  border: 1px solid red;
}
<textarea name="ta_1" disabled class="ok_class">Without read-only 1</textarea>
<br>
<textarea name="ta_2" disabled class="ok_class">Without read-only 2</textarea>
<br>
<textarea name="ta_3" disabled class="not_ok_class">With read-only 1</textarea>
<br>
<textarea name="ta_4" disabled class="not_ok_class">With read-only 2</textarea>

Upvotes: 2

Related Questions