Required Field CSS

HTML

<div class="test1">box 1<br>Appear box-shadow only on click
    <br>(default browser color)
    <br>show on 3 input at same time (all required fields).
    <form action="#">
        <input type="text">
        <input type="text" required>
        <input type="text" required>
        <input type="text">
        <input type="text" required>
        <input type="text">
        <input type="text">
        <input type="submit" text="Send">
    </form>
</div>
            
<div class="test2">box 2<br>Have CSS, but I need show color only when click (use standard formatting until it is clicked)
    <form action="#">
        <input type="text">
        <input type="text" required>
        <input type="text" required>
        <input type="text">
        <input type="text" required>
        <input type="text">
        <input type="text">
        <input type="submit" text="Send">
    </form>
</div>
      
<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" required>
        <input type="text" required>
        <input type="text">
        <input type="text" 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;
}
.test2 :required {
    border: 1px solid #FFF;
    border-radius: 3px;
}
.test2 :required:valid {
    background-color: #E8FFED;
    box-shadow: 0 0 3px 1px #00EA33;
}
.test2 :required:invalid {
    border:0;
}

.test3 input[type="text"] {
    border: 1px solid #D1D1D1;
    border-radius: 3px;
}

.test3 :required {
    box-shadow: none;
}

.test3 :required:focus {
    border: 1px solid #FFF;
    background-color: #FFEEEE;
    box-shadow: 0 0 3px 1px #EA2034;
}

.test3 :required:valid {
    background-color: #E8FFED;
    box-shadow: 0 0 3px 1px #00EA33;
}