CSS构造表单

• 表单标签使用
• 下拉菜单背景
• 滚动条的使用
• 结构化表单布局

 

1.表单标签的使用

    <label for="name">姓名: </ label><input type="text" name="name" id="name" />

 

2.去掉默认的表单间隔

    Form {

        Margin: 0;

        Padding: 0;

}

 

3.给文本框添加漂亮的边框

    Input,textarea {

        Border: 3px double #333;

}

 

1. 给下拉菜单设置背景色

   select {

   background:red;

   }

    

2. 给文本区域添加滚动条

   textarea {

       SCROLLBAR-FACE-COLOR: #333;

       SCROLLBAR-HIGHLIGHT-COLOR: #666;

       SCROLLBAR-SHADOW-COLOR: #333;

       SCROLLBAR-3DLIGHT-COLOR: #999;

       SCROLLBAR-ARROW-COLOR: #999;

       SCROLLBAR-TRACK-COLOR: #000;

       SCROLLBAR-DARKSHADOW-COLOR: #000;

   }

    

   6.表单外边框设置fieldset legend

       Fieldset {

           Margin:0 0 10px 0;

           Padding: 5px;

           Border: 1px solid #333;

   }

    

   Legend {

       Background-color: #ddd;

       Margin:0;

       Padding: 5px;

       Border-style: solid;

       Border- 1px;

       Border-color: #fff #aaa #666 #fff;

   }

    

       Fieldset {

           Background: #ddd;

   }

    

   7.结构化表单布局

       <form id="regForm">

           <fieldset>

               <legend>登陆信息</legend>

               <div class="dataArea frist">

                   <label for="username">用户名：</label><input type="text" id="username" class="input" />

               </div>

               <div class="dataArea">

                   <label for="password">密码：</label><input type="text" id="password" class="input" />

               </div>

               <div class="dataArea">

                   <label for="passwordVerify">确认密码：</label><input type="text" id="passwordVerify" class="input" />

               </div>

           </fieldset>

           <fieldset>

               <legend>个人信息</legend>

               <div class="dataArea frist">

                   <label for="nickname">昵称：</label><input type="text" id="nickname" />

               </div>

               <div class="dataArea">

                   <label for="email" class="hint">电子邮件：</label><input type="text" id="email" />

               </div>

               <div class="subArea">

                   <input type="submit" value="注册" /> <input type="button" value="返回" />

               </div>

           </fieldset>

   </form>

    

    

   #regForm fieldset {

       padding:0 20px 10px;

       border:0;

       border-top:1px #d0d0bf solid;

   }

   #regForm legend {

       padding:0 10px;

       font-weight:bold;

   }

   #regForm .dataArea {

       padding:2px 0;

   }

   #regForm .frist {

       padding:8px 0 2px;

   }

   #regForm .subArea input {

       padding:1px 4px;

   }

   #regForm label {

       110px;

       text-align:right;

       float:left;

   }