Displaying ✓ mark on valid input fields using pseudo-elements [duplicate]

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

@Xufox : IT IS Not duplicated.. because he want to apply :after for VALID input , not any INPUT. — Abdennour TOUMI
– Abdennour TOUMI, Commented Jul 31, 2016 at 5:49
there are options like this without using javascript codepen.io/brentrobbins/pen/beexQR which is more preferable — Marko Mackic
– Marko Mackic, Commented Jul 31, 2016 at 5:56
@MarkoMackic this was the answer I was looking for. Thank you — User5916261
– User5916261, Commented Jul 31, 2016 at 6: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
– Sebastian Simon, Commented Jul 31, 2016 at 10:36

Abdennour TOUMI · Accepted Answer · 2016-07-31 05:48:28Z

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>

Collectives™ on Stack Overflow

Displaying ✓ mark on valid input fields using pseudo-elements [duplicate]

1 Answer 1

DEMO :

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

DEMO :

Comments

Linked

Related