css form responsive 实例 - 自学教程(runoops.com)

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>css form responsive 实例 - 自学教程(runoops.com)</title>
    <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>
</head>

<body>

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

<div class="container">
        <form action="//demo.runoops.com/php/form-action.php">
            <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="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">