圆角文本框
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>
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>