Displaying ✓ mark on valid input fields using pseudo-elements

Question

Below is an attempt I have created to use the CSS content property to add the tick mark to show on valid required fields however it has not been successful.

As I haven’t really seen it done this way, is it just not possible to do it like this? Would it be more efficient to just use JavaScript?

I would like to hear about peoples’ opinions on the way I should implement this feature for user feedback.

input[type=text]:valid {
  border: 1px solid green;
}
input[type=text]:valid:after {
  content: '✓';
  color: green;
}

<p>Username:</p>
<input type="text" placeholder="Username" name="username" pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{1,20}$" title="Must Include Characters And Numbers only" required>

This essentially answered my question: http://codepen.io/brentrobbins/pen/beexQR

See demo [here](http://stackoverflow.com/a/38681057/747579) then tell me — Abdennour TOUMI, Jul 31 '16 at 05:44
@Xufox : IT IS Not duplicated.. because he want to apply :after for **VALID** input , not any INPUT. — Abdennour TOUMI, Jul 31 '16 at 05:49
there are options like this without using javascript http://codepen.io/brentrobbins/pen/beexQR which is more preferable — Marko Mackic, Jul 31 '16 at 05:56
@MarkoMackic this was the answer I was looking for. Thank you — User5916261, Jul 31 '16 at 06:04
@AbdennourTOUMI What is the big difference there? The answers from the other question state that pseudo-elements are impossible for _any_ input, so why would it be an _entirely_ different question to apply it for a particular class of inputs? Even the one answer here restates that and provides some alternatives _and_ any answer from that other question is sufficient to answer _this_ question. — Sebastian Simon, Jul 31 '16 at 10:36

Abdennour TOUMI · Accepted Answer · 2016-07-31T05:48:28.537

input can't have ::before or ::after elements. Try wrapping a <span> around the input and do the span:after

Or just use an img element after, as this will work too.

DEMO :

I used also jQuery#valid to change CSS class of that span.

$('[name=username]').keyup(function(){

    if($('form').valid()){
         $(this).parent().removeClass().addClass('isvalid');
     }else{
             $(this).parent().removeClass().addClass('notvalid');
        
     }

})

span.isvalid:after
{
  content: '✓';
  color: green;
  }
 span.notvalid:after{
     content: '×';
     color: red;
   
 } 

.isvalid input[name=username]{
 border: 2px solid green;
}
.notvalid input[name=username]{
 border: 2px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>

<p>Username:</p>
<form>
<span class="notvalid"><input type="text" placeholder="Username" name="username" pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{1,20}$" title="Must Include Characters And Numbers only" required></span>
  </form>

Displaying ✓ mark on valid input fields using pseudo-elements

1 Answers1

DEMO :