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

Question

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

Answer 1

. is missing from text class and try pointing 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 2

You are using .element text:focus which selects nothing because there is no element like text in .element. Instead of this you have to use .element.text:focus for eg.

.element.text:focus{
   ...
}

Answer 3

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);
}