表单控件案例

weixin_30421809

于 2018-05-28 14:21:00 发布

阅读量157

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/twinkle-/p/9099957.html

本文介绍了一种使用HTML和CSS实现的特定样式的输入框，包括如何为用户名、电子邮件和搜索框设置不同的边框样式及背景颜色。当获得焦点时，用户名输入框的背景颜色会发生变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 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>