:valid + :invalid with webfonts on forms

Question

I'm using the :valid and :invalid pseudo-classes, so the users can see if the input is correct in each form. I'm able to style them with CSS, but I have yet to find a solution where I can use an iconfont on the right side of the form, to display a valid or invalid input. Anyone knows how to do this?

Also some forms should not display valid or invalid before the user starts to type (like signup email). Can I bypass that code/css and just activate it when the user starts to type in the form?

Answer 1

You could realize what you want like this:

jsfiddle

input {
    border: #666 1px solid;    
    padding: 0.5em;
}

label {
    display: block;
    margin-top: 8px;
}

input + i:before {
    display: none;
}

input:focus + i:before {
    display: block;
}

input:focus:invalid {
    background: red;
}

input:focus:valid {
    background: lightgreen;
}

input:focus:valid + i:before {
    content: "\f14a";
}

I've used the fontawesome iconfont here.

EDIT

To make the icons inside the form elements you can add this rule:

input + i {
    position: relative;
    left: -20px;
}