How to change textbox highlight color using focus selector in css

Question

I am new to CSS . I have an input text box where I need to change the border color from red to another. I used the focus selector in CSS and was not successful.
Below is the input field:

<label>Phone<font color="red">*</font></label><br> <span> <input id="element_4_1" name="element_4_1" class="element text" size="3" maxlength="3" value="" type="text"> - </span> <span> <input id="element_4_2" name="element_4_2" class="element text" size="4" maxlength="4" value="" type="text"> - </span> <span> <input id="element_4_3" name="element_4_3" class="element text" size="10" maxlength="10" value="" type="text" required > </span> 

And css:

 .element text:focus { border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); } 

Edit: When I click the "Submit Form" button, as this is a required field, it appears in red if it is empty. Now it does not work. How can I change the highlight color of a text field when I focus on it.

Answer 1

Obviously, this will not work, since your selector is wrong, you use .element text , which selects the <text> element (invalid tag), which is nested inside the element with class .element it should be

 .element.text:focus --^-- /* No space as well */ 

Demo

Demo 2 (making it clean)

Demo 3 (Animation :focus )

 span input[type="text"]:focus { /* You can also use .element.text:focus here */ border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); } 

Answer 2

. missing from the text class and try specifying from input

 input.text:focus { border-color: green; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); } 

Demo

Answer 3

You are using .element text:focus , which does not select anything, because there is no element like text in .element . Instead, you should use .element.text:focus for example,

 .element.text:focus{ ... }