圆角文本框

sgw827

浏览: 33441 次
性别:
来自: 北京

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

圆角文本框

1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2.<html>
3. <head>
4.    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5.    <style type="text/css">
6.      th label{
7.        font-size:1.167em;
8.        font-weight:bold;
9.      }
10.      .reg{
11.        margin-left:40px;
12.        width:860px;
13.        table-layout:fixed;
14.      }
15.      .reg th{
16.        width:80px;
17.        height:46px;
18.        text-align:right;
19.        padding-right:15px;
20.      }
21.      .text_field, .capslock{
22.        outline:medium none;
23.        width:254px;
24.        height:20px;
25.        border:none;
26.        background: url(formbg.gif) no-repeat;
27.        _background-attachment:fixed;
28.        font-size:16px;
29.        margin:0;
30.        padding:8px;
31.      }
32.      .text_field:active, .text_field:focus, .textfield .focus{
33.        background-position:0 -40px;
34.      }
35.      .capslock{
36.        background-position:0 -80px;
37.      }
38.      .col-field{
39.        width:278px;
40.      }
41.    </style>
42. </head>
43. <body>
44.    <table class="reg">
45.      <tr>
46.        <th><label for="username">用户名</label></th>
47.        <td class="col-field"><input class="text_field" id="username" maxlength="28" type="text"/></td>
48.      </tr>
49.      <tr>
50.        <th><label for="password">密码</label></th>
51.        <td class="col-field"><input class="text_field" id="password" onkeypress="detect_capslock(event, this)" type="password"/></td>
52.      </tr>
53.    </table>
54. </body>
55.</html>
56.<script type="text/javascript">
57. function detect_capslock(e, obj){
58.    detectobj = obj;
59.    value_CapsLock = e.keyCode ? e.keyCode : e.which;
60.    valueShift = e.shiftKey ? e.shiftKey : (value_CapsLock == 16 ? true : false);
61.    detectobj.className = (value_CapsLock >= 65 && value_CapsLock <= 90 && !valueShift || value_CapsLock>=97 && value_CapsLock <= 122 && valueShift) ? "capslock" : "text_field";
62.    event.srcElement.onblur = clear_detect;
63. }
64.
65. function clear_detect(){
66.    detectobj.className = "text_field";
67. }
68.</script>

分享到：