Text Box input focus defocus style implementation code

Source: Internet
Author: User

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!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.