指定した値やステータスを持つ要素を影響させる

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <style>
        input[type="text"]:disabled {
            color:orange;
        }
        input[type="password"]:enabled {
            border:5px solid blue;
        }
        input[type="radio"]:checked + label {
            color:pink;
        }
    </style>
</head>
<body>
    <form action="#" method="post">
        <table>
            <tr>
                <td>name:</td>
                <td><input type="text" name="name" size="20" maxlength="10" value="okamoto" disabled></td>
            </tr>
            <tr>
                <td>password:</td>
                <td><input type="password" name="pass" size="10" maxlength="6"></td>
            </tr>
            <tr>
                <td><label>grade:</label></td>
                <td>
                    <input type="radio" name="grade" value="1" checked> <label>1</label>
                    <input type="radio" name="grade" value="2"> <label>2</label>
                    <input type="radio" name="grade" value="3"> <label>3</label>
                    <input type="radio" name="grade" value="4"> <label>4</label>
                    <input type="radio" name="grade" value="5"> <label>5</label>
                    <input type="radio" name="grade" value="6"> <label>6</label>
                </td>
            </tr>

input[type="text"]:disabledで、input typeがtextのものでdisabledのステータスになっているものを指定し、影響させます。

input[type="password"]:enabledで input typeがpasswordのもので書き込み可能なものを指定し、影響させます。

input[type="radio"]:checked + labelで input typeがradioのものでcheckがされておりlabelがついているものを指定し、影響させます。

f:id:hrt0kmt:20140715115221p:plain



参照