How to style required field (only when it is clicked) [closed] - css

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I need style required fields, but I need show style only when user click first time, and then it does not click, I would like to keep with the default color.
With effect of click first form, but with css of second form, result of box 3:
http://jsfiddle.net/rflfn/m0f6xuxd/
Note: the red box-shadow is default color of browser for tag required of HTML5 (I am not using any script).
<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>
.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 {
background-color: #FFEEEE;
box-shadow: 0 0 3px 1px #EA2034;
}
.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;
}

Answer 1

EDIT: No classes needed.
You can use general sibling combinator. The only problem is it will not work for elements above the one you click on. To go further you will need Javascript.
jsfiddle
Key part:
input:required:focus~input:required, input:required:focus {
border: 1px solid #FFF;
background-color: #FFEEEE;
box-shadow: 0 0 3px 1px #EA2034;
}