首页 > 代码库 > css学习之-表单样式

css学习之-表单样式

2024-09-09 15:26:42   218人阅读

<!DOCTYPE html>
<html>
<head>
    <title>表单控件样式</title>
    <meta charset="utf-8">
    <style type="text/css">
        fieldset{
            margin:1em 0;
            padding: 1em;
            border:1px solid #ccc;
            background-color: #d6d8d8;
            cursor: pointer;
        }
        fieldset legend{
            font-weight: bold;
            font-size: 16px;
        }
        fieldset div label{
            font-size: 14px;
        }
        .contact label,.comments label{
            display: block;
            margin: 0.5em 0;
        }
        .information label{
            float: left;
            width: 10em;
        }
        #lage,#lmonth,#lyear{
            width:0;
            text-indent: -1000em;
        }
        #age{
            width: 2em;
        }
        #year{
            width: 4em;
        }
        .information{
            position: relative;
            min-height: 180px;
        }
        .information div h2{
            margin:2em 0;
            padding: 0;
            font-size: 14px;
            font-weight: normal;
            float: left;
        }
        .information .lcol{
                position: absolute;
                top: 70px;
                left: 150px;
        }
        .information .col{
            width: 8em;
            float: left;
        }
        .information:after{
            clear: both;
        }
        .information .col label{
            margin: 0.3em 0;
        }
        .information .col label input{
            margin:0 0.5em;
        }
        .remember div label{
            margin-right: 0.5em;
        }
        .remember div label input{
            margin-right: 0.3em;
        }
        button{
            width: 100px;
            height: 30px;
            border:1px solid #989898;
            border-radius: 6px;
            background-color: #c5e063;
            box-shadow: 2px 2px 2px #ccc;
            color: #fff;
            font-size: 14px;
            font-weight: bold;
            text-shadow: 1px 1px 1px #666;
        }    
    </style>
</head>
<body>
<form>
    <fieldset class="contact">
        <legend>Your Contact Details</legend>
        <div>
            <label for="author">Name:<em class="required">(Required)</em></label>
            <input type="text" name="author" id="author">
        </div>
        <div>
            <label for="email">Email Address:</label>
            <input type="text" name="email" id="email">
        </div>
        <div>
            <label for="url">Web Address:</label>
            <input type="text" name="url" id="url">
        </div>
    </fieldset>
    <fieldset class="comments">
        <legend>Comments</legend>
        <div>
            <label for="message">Message:<em class="required">(Required)</em></label>
            <textarea name="message" id="message"></textarea>
        </div>
    </fieldset>
    <fieldset class="information">
    <legend>Personal information</legend>
    <div>
        <label for="place">Place of Birth:</label>
        <select id="place">
            <option value="1">USA</option>
            <option value="2">China</option>
            <option value="3">English</option>
        </select>
    </div>
    <div>
        <label for="date">Date of Birth:</label>
        <label for="age" id="lage">Age:</label>
        <input type="text" name="age" id="age">
        <label for="month" id="lmonth">month of birth:</label>
        <select id="month">
            <option value="1">January</option>
            <option value="2">February</option>
            <option value="3">March</option>
        </select>
        <label for="year" id="lyear">year of birth:</label>
        <input type="text" name="year" id="year">
    </div>
    <div class="color">
        <h2>Favorite Color:</h2>
        <div class="lcol">
        <div class="col">
            <label><input type="checkbox" name="red" id="red">red</label>
            <label><input type="checkbox" name="yellow" id="yellow">yellow</label>
            <label><input type="checkbox" name="pink" id="pink">pink</label>
            <label><input type="checkbox" name="green" id="green">green</label>
        </div>
        <div class="col">
            <label><input type="checkbox" name="orange" id="orange">orange</label>
            <label><input type="checkbox" name="purple" id="purple">purple</label>
            <label><input type="checkbox" name="blue" id="blue">blue</label>
            <label><input type="checkbox" name="other" id="other">other</label>
        </div>
        </div>
    </div>
    </fieldset>
    <fieldset class="remember">
        <legend>Remember Me</legend>
        <div>
            <label for="yes">
            <input type="radio" name="choice" id="yes">Yes</label>
            <label for="no">
            <input type="radio" name="choice" id="no">No</label>
        </div>
    </fieldset>
<!--     <input type="submit" value="http://www.mamicode.com/submit">
 -->    <button type="submit">Book Now</button>
</form>
</body>
</html>

 

css学习之-表单样式


联系
我们