Required Field CSS

by Rafael Nepomuceno

HTML

<div class="test3">box 3<br>I need style all required fields with my own css (show on 3 input at same time, not only on focus input)
    <form action="#">
        <input type="text">
        <input type="text" class="required" required>
        <input type="text" class="required" required>
        <input type="text">
        <input type="text" class="required" required>
        <input type="text">
        <input type="text">
        <input type="submit" text="Send">
    </form>
</div>

CSS

.test1, .test2, .test3 {
    width: 230px;
    padding: 5px;
    margin: 5px;
    border: 1px solid red;
    display: inline-block;
    vertical-align: top;
}
form {
    margin: 20px;
}
form * {
    display: block;
    clear: both;
    margin: 10px;
}

:invalid {
  box-shadow: none;
}

:-moz-submit-invalid {
  box-shadow: none;
}

:-moz-ui-invalid {
  box-shadow: none;
}

:-moz-ui-invalid:not(output) {
    border: 1px solid #FFF;
    background-color: #FFEEEE;
    box-shadow: 0 0 3px 1px #EA2034;
}

:-moz-ui-valid:not(output) {
    border: 1px solid #FFF;
    background-color: #F6FFF6;
    box-shadow: 0 0 3px 1px #00D100;
}

:-moz-submit-invalid {
  border: 1px solid #FFF;
    background-color: #00FFF6;
    box-shadow: 0 0 3px 1px #FFD100;
}