HTML5 运用CSS 格式化fieldset容器的Legend-HTML教程-爱易网页

HTML5 运用CSS 格式化fieldset容器的Legend

日期：2014-05-17　浏览次数：20582 次

HTML5 使用CSS 格式化fieldset容器的Legend

下面的例子展示了，你如使用CSS来改变HTML5的Fieldset标签的legend。

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        label {
            color: #F00;
        }
 
        legend {
            color: #F00;
            font-family: "Comic Sans MS";
            font-weight: bold;
            text-shadow: #999 2px 2px 1px;
            text-transform: uppercase;
        }
    </style>
</head>
<body>
 
    <fieldset>
        <legend>Comments form</legend>
        <table>
            <tr>
                <th><label for="usrnm">Username:</label></th>
                <td><input id="usrnm" type="email" name="username" placeholder="user@domain.com" /></td>
            </tr>
            <tr>
                <th><label for="psswd">Password:</label></th>
                <td><input id="psswd" type="password" name="password" placeholder="Top secret password" /></td>
            </tr>
            <tr>
                <th><label for="cmmnts">Comments:</label></th>
                <td><textarea id="cmmnts" cols="30" rows="5" placeholder="Comments"></textarea></td>
            </tr>
            <tr>
                <th><label for="sub">Subscribe:</label></th>
                <td><input id="sub" type="checkbox" value="1" /></td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td><input id="submitBtn" type="submit" value="Submit" /></td>
            </tr>
        </table>
    </fieldset>
 
</body>
</html>

源码下载：

formatting_legend.zip