圆角文本框的实现

jsntghf

浏览: 2528993 次
性别:
来自: 苏州

最近访客更多访客>>

samhunglv

loginboot

yongjiucui

diabloaaa

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Web前端

圆角文本框 html css javascript

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
      th label{
        font-size:1.167em; 
        font-weight:bold;
      }
      .reg{
        margin-left:40px;
        width:860px;
        table-layout:fixed;
      }
      .reg th{
        width:80px;
        height:46px;
        text-align:right;
        padding-right:15px;
      }
      .text_field, .capslock{
        outline:medium none; 
        width:254px; 
        height:20px; 
        border:none; 
        background: url(formbg.gif) no-repeat;
        _background-attachment:fixed; 
        font-size:16px; 
        margin:0; 
        padding:8px;
      }
      .text_field:active, .text_field:focus, .textfield .focus{
        background-position:0 -40px;
      }
      .capslock{
        background-position:0 -80px;
      }
      .col-field{
        width:278px;
      }
    </style>
  </head>
  <body>
    <table class="reg">
      <tr>
        <th><label for="username">用户名</label></th>
        <td class="col-field"><input class="text_field" id="username" maxlength="28" type="text"/></td>
      </tr>
      <tr>
        <th><label for="password">密码</label></th>
        <td class="col-field"><input class="text_field" id="password" onkeypress="detect_capslock(event, this)" type="password"/></td>
      </tr>       
    </table>
  </body>
</html>
<script type="text/javascript">
  function detect_capslock(e, obj){
    detectobj = obj;
    value_CapsLock = e.keyCode ? e.keyCode : e.which;
    valueShift = e.shiftKey ? e.shiftKey : (value_CapsLock == 16 ? true : false);
    detectobj.className = (value_CapsLock >= 65 && value_CapsLock <= 90 && !valueShift || value_CapsLock>=97 && value_CapsLock <= 122 && valueShift) ? "capslock" : "text_field";
    event.srcElement.onblur = clear_detect;
  }

  function clear_detect(){
    detectobj.className = "text_field";
  }
</script>

效果图：