• 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;

      }

  • 相关阅读:
    通过IMM With Remote Console为服务器安装操作系统
    linux下编译安装php5.6出现 configure: error: Cannot find MySQL header files under /usr/local/mysql.
    5700交换机清除配置
    嵌入式驱动解析:从串口驱动到Linux驱动模型
    Win10自带Ubuntu子系统的安装与配置
    关于嵌入式C代码优化的几种方法
    2020软考高级系统分析师,你想知道的全在这
    libpng warning: iCCP: known incorrect sRGB profile
    pycharm中导入pygame库失败及解决办法
    pycharm中导入pygame等第三方库
  • 原文地址:https://www.cnblogs.com/lifi/p/5728711.html
Copyright © 2020-2023  润新知