表单控件案例

 1  <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>Document</title>
 6      <style type="text/css">
 7         .uersname{
 8             border:0 none;/* 去掉边框 */
 9             outline-style:none; /* 去掉轮廓线 */
10             background:pink;
11             border:#eee dashed 1px;
12         }
13         .uersname:focus{
14             background:red;
15         }
16         .email{
17             border:0 none;
18             outline-style:none;
19             border-bottom:dotted 1px pink;
20         }
21         .search{
22             border:0 none;
23             outline-style:none;
24             border:solid #999 1px;
25             background:url("serch.jpg") no-repeat right;
26         }
27      </style>
28  </head>
29  <body>
30      <label for="uersname">用户名：</label><input type="text" class="uersname" id="uersname">
31       <p>邮箱：<input type="text" class="email"></p>
32      搜索一下：<input type="text" class="search"> 
33  </body>
34  </html>
获取光标焦点：
label for id 获取光标焦点