圆角文本框

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" οnkeypress="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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值