How to change the highlight color of textbox using focus selector in css

css, css-selectors, html

Solution

Obviously it won't work as your selector is wrong, you are using `.element text` which selects an element of `<text>`(Invalid tag) which is nested inside element having a `class` `.element` it should be

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

Demo

Demo 2 (Making it lil cleaner)

Demo 3 (Animating the `: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);
}

Problem

I'm new to CSS. I have a input text field where I need to change the color of the border from red to another color. I used 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 the 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 submit form, as it is a required field, this shows red if empty. Now it is not working. How can I change the highlight color of the textbox when I focus on it.

Original source