:before with an attribute selector

Question

I have the following html form

<div>
    <p>Field1</p>
    <input type="text" name="fld_one" id="fld_one" value="" />
</div>
<div>
    <p>Field2</p>
    <input type="text" name="fld_two" id="fld_two" required value="" />
</div>

I want to use CSS to mark required fields like so

div input[required]:before { color: #f00; content: "*"; }

However this css line does not make a visible change in the document.

For reference I was able to modify all required fields with the following:

div input[required] { background-color: #000; }

TL;DR - Can the :before pseudo-class be used with an attribute selector? If so, how?

score 6 · Accepted Answer · answered Sep 13 '12 at 17:39

6

:before is a pseudo-element, not a pseudo-class. It can be used with an attribute selector, but you can't use it with input elements with some browsers because it is a replaced element. (Some browsers, because it's not very well-defined whether they're supposed to work, although most lean toward "no".)

The reason why your attribute selector works is because you're applying styles to the input element itself, which works consistently in every browser.

answered Sep 13 '12 at 17:39

BoltClock

700,868
160
1,392
1,356

1

By the way, [some browsers have trouble with pseudo-elements and attribute selectors regardless of actual element being selected](http://stackoverflow.com/questions/8951822/combine-css-attribute-and-pseudo-element-selectors/8988418#8988418). I have no idea if this has been fixed yet. – BoltClock Sep 13 '12 at 17:51

score 5 · Answer 2 · edited Feb 24 '20 at 14:10

Pseudo elements do not work with input elements, as they have no content.

From the specs:

Authors specify the style and location of generated content with the :before and :after pseudo-elements. As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element's document tree content. The 'content' property, in conjunction with these pseudo-elements, specifies what is inserted.

Input elements have no childNodes in the DOM, hence, no content property to insert into.

As a possible workaround, apply the stars to the labels instead of the input elements

score 3 · Answer 3 · edited May 23 '17 at 11:53

3

:before is not valid on <input> as it doesn't have "content" - see: CSS content generation before or after 'input' elements for a full explanation.

The "traditional" way of doing it is inserting the * on p or label (label is more semantic).

edited May 23 '17 at 11:53

Community

1
1

answered Sep 13 '12 at 17:41

phil

174
15

:before with an attribute selector

3 Answers3

Linked