文章: 阅读:

CSS Form 表单

CSSCSS

前言

  • 使用 CSS 来渲染 HTML 的表单元素。

1、输入框 input

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    <style>
        input[type=text], select {
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            display: inline-block;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }

        input[type=submit] {
            width: 100%;
            background-color: #4CAF50;
            color: white;
            padding: 14px 20px;
            margin: 8px 0;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        input[type=submit]:hover {
            background-color: #45a049;
        }

        div {
            border-radius: 5px;
            background-color: #f2f2f2;
            padding: 20px;
        }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <h3>使用 CSS 来渲染 HTML 的表单元素</h3>

    <div>
        <form>
            <label for="fname">First Name</label>
            <input type="text" id="fname" name="firstname" placeholder="Your name.." />

            <label for="lname">Last Name</label>
            <input type="text" id="lname" name="lastname" placeholder="Your last name.." />

            <label for="country">Country</label>
            <select id="country" name="country">
                <option value="china">China</option>
                <option value="australia">Australia</option>
                <option value="canada">Canada</option>
                <option value="usa">USA</option>
            </select>

            <input type="submit" value="Submit" />
        </form>
    </div>

  • 效果


    使用 CSS 来渲染 HTML 的表单元素

















1.1 样式

  • 使用 width 属性来设置输入框的宽度。

  • 以下实例中设置了所有 <input> 元素的宽度为 100%，如果只想设置指定类型的输入框可以使用以下属性选择器：

    • input[type=text] - 选取文本输入框
    • input[type=password] - 选择密码的输入框
    • input[type=number] - 选择数字的输入框

  • 实例

    1
    2
    3
    4
    5
    <style>
        input {
            width: 100%;
        }
    </style>
    1
    2
    3
    4
    5
    6
    <p>全宽输入框:</p>

    <form>
        <label for="fname">First Name</label>
        <input type="text" id="fname" name="firstname" placeholder="Your name.." />
    </form>

  • 效果


    全宽输入框:







1.2 填充

  • 使用 padding 属性可以在输入框中添加内边距。

  • 注意：设置了 box-sizing 属性为 border-box。这样可以确保浏览器呈现出带有指定宽度和高度的输入框是把边框和内边距一起计算进去的。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    <style>
        input[type=text] {
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            box-sizing: border-box;
        }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    <p>设置文本框的内边距:</p>

    <form>
        <label for="fname">First Name</label>
        <input type="text" id="fname" name="fname" />
        <label for="lname">Last Name</label>
        <input type="text" id="lname" name="lname" />
    </form>

  • 效果


    设置文本框的内边距:









1.3 边框

  • 使用 border 属性可以修改 input 边框的大小或颜色，使用 border-radius 属性可以给 input 添加圆角。

  • 如果只想添加底部边框可以使用 border-bottom 属性。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <style>
        input[type=text] {
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            box-sizing: border-box;
            border: 2px solid red;
            border-radius: 4px;
        }
        
        #lname {
            border: none;
            border-radius: 0;
            border-bottom: 2px solid red;
        }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    <p>文本框的边框:</p>

    <form>
        <label for="fname">First Name</label>
        <input type="text" id="fname" name="fname" />
        <label for="lname">Last Name</label>
        <input type="text" id="lname" name="lname" />
    </form>

  • 效果


    文本框的边框:









1.4 颜色

  • 可以使用 background-color 属性来设置输入框的背景颜色，color 属性用于修改文本颜色。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <style>
        input[type=text] {
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            box-sizing: border-box;
            border: none;
            background-color: #3CBC8D;
            color: white;
        }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    <p>设置输入框颜色:</p>

    <form>
        <label for="fname">First Name</label>
        <input type="text" id="fname" name="fname" value="John" />
        <label for="lname">Last Name</label>
        <input type="text" id="lname" name="lname" value="Doe" />
    </form>

  • 效果


    设置输入框颜色:









1.5 聚焦

  • 默认情况下，一些浏览器在输入框获取焦点时（点击输入框）会有一个蓝色轮廓。可以设置 input 样式为 outline: none; 来忽略该效果。

  • 使用 :focus 选择器可以设置输入框在获取焦点时的样式。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <style>
        input[type=text] {
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            box-sizing: border-box;
            border: 1px solid #555;
            outline: none;
            -webkit-transition: 0.5s;
            transition: 0.5s;
        }

        input[type=text]:focus {
            background-color: lightblue;
            border: 3px solid #f00;
        }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <p>使用 :focus 选择器（点击输入框时）来给文本输入框添加背景颜色。在文本框获取焦点时，设置文本框当边框颜色为黑色。
    使用 CSS transition 属性来设置边框当颜色 (在 0.5 秒内修改边框颜色)。</p>


    <form>
        <label for="fname">First Name</label>
        <input type="text" id="fname" name="fname" value="John" />
        <label for="lname">Last Name</label>
        <input type="text" id="lname" name="lname" value="Doe" />
    </form>

  • 效果


    使用 :focus 选择器（点击输入框时）来给文本输入框添加背景颜色。在文本框获取焦点时，设置文本框当边框颜色为黑色。使用 CSS transition 属性来设置边框当颜色 (在 0.5 秒内修改边框颜色)。









1.6 图标

  • 如果想在输入框中添加图标，可以使用 background-image 属性和用于定位的 background-position 属性。注意设置图标的左边距，让图标有一定的空间。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <style>
        input[type=text] {
            width: 100%;
            box-sizing: border-box;
            border: 2px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
            background-color: white;
            background-image: url(https://demo.qianchia.com/media/image/demo/demo17.png);
            background-position: 10px 10px;
            background-repeat: no-repeat;
            padding: 12px 20px 12px 40px;
        }
    </style>
    1
    2
    3
    4
    5
    <p>输入框按钮:</p>

    <form>
        <input type="text" name="search" placeholder="搜索.." />
    </form>

  • 效果


    输入框按钮:






1.7 按钮

  • 提示: 使用 width: 100%; 设置全宽按钮。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <style>
        input[type=button],
        input[type=submit],
        input[type=reset] {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 16px 32px;
            text-decoration: none;
            margin: 4px 2px;
            cursor: pointer;
        }
    </style>
    1
    2
    3
    4
    5
    6
    7
    <p>按钮样式:</p>

    <form>
        <input type="button" value="按钮" />
        <input type="reset" value="重置" />
        <input type="submit" value="提交" />
    </form>

  • 效果


    按钮样式:








1.8 动画

  • 以下实例使用了 CSS transition 属性，该属性设置了输入框在获取焦点时会向右延展。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <style>
        input[type=text] {
            width: 130px;
            box-sizing: border-box;
            border: 2px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
            background-color: white;
            background-image: url(https://demo.qianchia.com/media/image/demo/demo17.png);
            background-position: 10px 10px;
            background-repeat: no-repeat;
            padding: 12px 20px 12px 40px;
            -webkit-transition: width 0.4s ease-in-out;
            transition: width 0.4s ease-in-out;
        }

        input[type=text]:focus {
            width: 100%;
        }
    </style>
    1
    2
    3
    4
    5
    <p>搜索输入框带动画:</p>

    <form>
        <input type="text" name="search" placeholder="搜索.." />
    </form>

  • 效果


    搜索输入框带动画:






2、文本域 textarea

  • 使用 resize 属性来禁用文本框可以重置大小的功能（一般拖动右下角可以重置大小）。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <style>
        textarea {
            width: 100%;
            height: 150px;
            padding: 12px 20px;
            box-sizing: border-box;
            border: 2px solid #ccc;
            border-radius: 4px;
            background-color: #f8f8f8;
            font-size: 16px;
            resize: none;
        }
    </style>
    1
    2
    3
    4
    5
    <p>使用 resize 属性来禁用文本框可以重置大小的功能（一般拖动右下脚可以重置大小）。</p>

    <form>
        <textarea>一些文本...</textarea>
    </form>

  • 效果


    使用 resize 属性来禁用文本框可以重置大小的功能（一般拖动右下脚可以重置大小）。






3、下拉列表 select

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <style>
        select {
            width: 100%;
            padding: 16px 20px;
            border: none;
            border-radius: 4px;
            background-color: #f1f1f1;
        }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <p>下拉菜单</p>

    <form>
        <select id="country" name="country">
            <option value="china">China</option>
            <option value="au">Australia</option>
            <option value="ca">Canada</option>
            <option value="usa">USA</option>
        </select>
    </form>

  • 效果


    下拉菜单






4、响应式表单

  • 响应式表单可以根据浏览器窗口的大小重新布局各个元素，可以通过重置浏览器窗口大小来查看效果。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    <style>
        * {
            box-sizing: border-box;
        }

        input[type=text],
        select,
        textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 4px;
            resize: vertical;
        }

        label {
            padding: 12px 12px 12px 0;
            display: inline-block;
        }

        input[type=submit] {
            background-color: #4CAF50;
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            float: right;
        }

        input[type=submit]:hover {
            background-color: #45a049;
        }

        .container {
            border-radius: 5px;
            background-color: #f2f2f2;
            padding: 20px;
        }

        .col-25 {
            float: left;
            width: 25%;
            margin-top: 6px;
        }

        .col-75 {
            float: left;
            width: 75%;
            margin-top: 6px;
        }

        /* 清除浮动 */
        .row:after {
            content: "";
            display: table;
            clear: both;
        }

        /* 响应式布局 layout - 在屏幕宽度小于 600px 时， 设置为上下堆叠元素 */
        @media screen and (max-width: 600px) {

            .col-25,
            .col-75,
            input[type=submit] {
                width: 100%;
                margin-top: 0;
            }
        }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    <h2>响应式表单</h2>
    <p>响应式表单可以根据浏览器窗口的大小重新布局各个元素，可以通过重置浏览器窗口大小来查看效果：</p>

    <div class="container">
        <form>
            <div class="row">
                <div class="col-25">
                    <label for="fname">First Name</label>
                </div>
                <div class="col-75">
                    <input type="text" id="fname" name="firstname" placeholder="Your name..">
                </div>
            </div>
            <div class="row">
                <div class="col-25">
                    <label for="lname">Last Name</label>
                </div>
                <div class="col-75">
                    <input type="text" id="lname" name="lastname" placeholder="Your last name..">
                </div>
            </div>
            <div class="row">
                <div class="col-25">
                    <label for="country">Country</label>
                </div>
                <div class="col-75">
                    <select id="country" name="country">
                        <option value="china">China</option>
                        <option value="australia">Australia</option>
                        <option value="canada">Canada</option>
                        <option value="usa">USA</option>
                    </select>
                </div>
            </div>
            <div class="row">
                <div class="col-25">
                    <label for="subject">Subject</label>
                </div>
                <div class="col-75">
                    <textarea id="subject" name="subject" placeholder="Write something.."
    					style="height:200px"></textarea>
                </div>
            </div>
            <div class="row">
                <input type="submit" value="Submit">
            </div>
        </form>
    </div>

  • 效果


    响应式表单


    响应式表单可以根据浏览器窗口的大小重新布局各个元素，可以通过重置浏览器窗口大小来查看效果：










































如果您觉得阅读本文对您有帮助，请用微信、支付宝 or QQ 扫码赞助，您的支持是我写作最大的动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文链接，否则保留追究法律责任的权利。

Qian Chia

Posted @ 2019-11-05 20:17


评论


文章目录
  1. 1. 前言
  2. 2. 1、输入框 input
    1. 2.1. 1.1 样式
    2. 2.2. 1.2 填充
    3. 2.3. 1.3 边框
    4. 2.4. 1.4 颜色
    5. 2.5. 1.5 聚焦
    6. 2.6. 1.6 图标
    7. 2.7. 1.7 按钮
    8. 2.8. 1.8 动画
  3. 3. 2、文本域 textarea
  4. 4. 3、下拉列表 select
  5. 5. 4、响应式表单
隐藏目录