vendredi 31 juillet 2015

Using :after pseudoelement with :required pseudoclass

Pardon me if this question is already answered, but I couldn't find it.

I am trying to put an asterisk after all <input required> elements.

I found that I can style these with the :required selector.

I would like to use the :after pseudoelement to add an asterisk.

My CSS:

*:required:after {
    content:"*";
    font-size:48px;
    color:red;
    position:relative;
    top:9px;
}

In Opera 30 and Chrome 40, I see this (note that nearly all of these have the required attribute, see code below.):

A Pseudoclass's Pseudoelement

In Firefox 39, no pseudoelements are displayed. Why is it that the pseudoelement only displays on the <input type="date"/> and not on any of the other inputs or selects? And, more importantly, how can I make it display on all required elements?

I'm using bootstrap3 and jquery, if that matters.

HTML:

<label>Title 
    <select name="title" id="title" class="form-control" required> <!-- Trigger Gender here I think... -->
        <option value="Mr.">Mr.</option>
        <option value="Mrs.">Mrs.</option>
        <option value="Miss">Miss</option>
        <option value="Ms.">Ms.</option>
        <option value="Dr.">Dr.</option>
        <option value="Rev.">Rev.</option>
    </select>
</label>
<label>First Name (as on Passport)  <input type="text" name="firstName" id="firstName" placeholder="Charles" class="form-control" required/></label>
<label>Last Name (as on Passport)   <input type="text" name="lastName" id="lastName" placeholder="Studd" class="form-control" required/></label>
<label>Maiden Name (if applicable)  <input type="text" name="maidenName" id="maidenName" class="form-control"/></label>
<label>Other Names                  <textarea name="aliases" id="aliases" placeholder="C. T. Studd" class="form-control"></textarea></label>
<label>Date of Birth                <input type="date" name="birthday" id="birthday" class="form-control" placeholder="12/02/1860" required/></label>
<label>Gender Autofilled
    <select name="gender" id="gender" class="form-control" required>
        <option value="male">Male</option>
        <option value="female">Female</option>
    </select>
</label>

Aucun commentaire:

Enregistrer un commentaire