How do you change the CSS of a text input when selected?

Question

I want to change the CSS of an <input type="text"> when the text box is selected; i.e. when the user clicks on the text box, I want different CSS rules to apply. Is there any way to do this using pure CSS?

Answer 1

Have you tried the focus pseudo-class

:focus 

more info: http://reference.sitepoint.com/css/pseudoclass-focus

Answer 2

select the input fields which have attribute of text only

input[type="text"]:focus{background-color:yellow;}

Select any input field (checkbox,file,hidden,image,password,radio,reset,submit,text)

input:focus{background-color:yellow;}

Select any textarea

textarea:focus{background-color:yellow;}

OK that's by CSS however if you are looking to achieve smooth animated effects and have more control over focus/blur it is better to use JQuery or other JavaScript frameworks.