Text Box input focus defocus style implementation code

First, use the css pseudo class: focus to change.

The html code of the text box is assumed as follows:Copy codeThe Code is as follows: <dl>
<Dt> Name: <dt>
<Dd> <input type = "text"/> </dd>
<Dt> Password: <dt>
<Dd> <input type = "password"/> </dd>
<Dt> Textarea: <dt>
<Dd> <textarea> </dd>
</Dl>

The css code is written as follows:

Input [type = "text"]: focus, input [type = "password"]: focus, textarea: focus {border: 1px solid # f00; background: # ccc ;}
It lists the focus style of the text box, password box, and paragraph box. Add a red border and a gray background.

Is it a simple solution now? Test with a browser (Firefox, Safari, IE7). Everything is OK, but IE6.

To make IE6 equally beautiful, I can only use js. Here I will use jquery to give you an effect.Copy codeThe Code is as follows: $ (document). ready (function (){
$ ("Input [@ type = 'text'], input [@ type = 'Password'], textarea "). focus (function () {$ (this ). css ({background: "# ccc", border: "1px solid # f00 "})});
});

Isn't jquery easy to do? It's similar to css writing!

This is just the focus state. jquery's defocus State requires you to give instructions. It's silly and naive. It will not change itself, so it will be added with the defocus state.Copy codeThe Code is as follows: $ (document). ready (function (){
$ ("Input [@ type = 'text'], input [@ type = 'Password'], textarea" ).focus(function({{}(this}.css ({background: "# ccc", border: "1px solid # f00" })}).blur(function(){((this..css ({background: "# FFF", border: "1px solid # ccc "})});
})

After defocus, the background is white and the border turns gray.

Of course, you can also use addClass and removeClass of jquery to simplify the Code:Copy codeThe Code is as follows: $ (document). ready (function (){
$ ("Input [@ type = 'text'], input [@ type = 'Password'], textarea "). focus (function () {$ (this ). addClass ("focus ")}). blur (function () {$ (this ). removeClass ("focus ")});
})

First, the input box is set to a default style. When focusing, add css "focus" to addClass, and remove css "focus" from removeClass when focusing ".

Everything is done!