css :disabled::after not working

Question

Can't seem to get the following selector working.

Am I doing something wrong?

   html body div#main_container form#account_info input[type=text]:disabled::after, input[type=email]:disabled::after {
     content: "dfjnsfnj";
     position: absolute; float: none; clear: both; display: block;
     top: 0; left: 0;
     width: 100px; height: 100px; margin: 0; padding: 0;

     font-family: "Open Sans", sans-serif; font-weight: 600; font-size: 25px; line-height: 25px; text-align: left;
     letter-spacing: -3px;
     color: #3d5a71;
     background-color: red;
   }

That really is a masterfully crafted wrong CSS selector. One part is far too specific, the other is overly generic. And to answer the question: an `input` is a self-closing element that cannot contain child elements, thus no pseudo elements either. — Niels Keurentjes, Jul 16 '15 at 13:47
@NielsKeurentjes Care to explain? Works fine without the `:disabled` selector. But doesn't work with it... — Nikk, Jul 16 '15 at 13:49
@Harry that linked duplicate is actually incredibly wrong. It's simply forbidden by HTML specs to apply pseudoelements to childless elements. — Niels Keurentjes, Jul 16 '15 at 13:49
I see it's sort of working in Chrome indeed, but that's a bug for sure. [Check this link](http://www.scottohara.me/article/pseudo-element-input.html). — Niels Keurentjes, Jul 16 '15 at 13:53
@NielsKeurentjes I reopened. Pseudo elements can't be applied to `input` elements, though. That's part of the reason why the OP's code isn't working.. What's a better duplicate? — Josh Crozier, Jul 16 '15 at 13:58
@JoshCrozier typed a better answer, can link future duplicates here :) — Niels Keurentjes, Jul 16 '15 at 14:11

score 5 · Answer 1 · answered Jul 16 '15 at 14:10

While I verified that the construct does work somewhat in current Chrome stable, this seems an unfortunate by-effect of generic parsing.

input is specified in the HTML5 standards as having an "Empty" content model, like other self-closing elements such as <br> and <img>. All of them are therefore not permitted, in any situation, to have child elements. Including pseudo-elements.

Your problem is easily solved by including some extra markup, which would insert the generated content in a more plausible location in the doctree than as the child element of a checkbox. The following example works fine and is semantically correct:

input:disabled[type=checkbox] + label:after {
  content:' testing this CSS';
}

<input disabled type="checkbox">
<label>Checkbox for</label>

Nikk · Accepted Answer · 2015-07-16T14:25:41.277

1

Since it can't be applied onto input elements.

Added it to the label instead. Works now :)!

html body div#main_container form#account_info input:disabled[type=text] + label:after, 
html body div#main_container form#account_info input:disabled[type=email] + label:after {}

edited Jul 16 '15 at 14:25

answered Jul 16 '15 at 14:10

Nikk

7,384
8
44
90

1

You should actually use `+` here instead of `~`, made the same booboo in my example. The first one will correctly allow multiple checkboxes with different definitions. And please, strip all unneeded elements from your selectors - `#account_info input[type=text]:disabled ~ label::after` is just as specific as what you have now. – Niels Keurentjes Jul 16 '15 at 14:14
@NielsKeurentjes Like that above^? – Nikk Jul 16 '15 at 14:26
1

Yep, and now for brevity hehe. – Niels Keurentjes Jul 16 '15 at 14:31

css :disabled::after not working

2 Answers2