小白網頁設計練成記-DAY23-Pseudo class 2

2022 iThome 鐵人賽

DAY 23

自我挑戰組

小白網頁設計練成記系列第 23 篇

14th鐵人賽 css 新手上路

Eric

2022-09-23 23:22:25

355 瀏覽

分享至

:focus 輸入焦點在欄位上時，就套用自訂的CSS。

<style>
 input.text_field:focus{
            background-color: #ff0
        }
</style>
</head>
<body>
<input type="text" class="text_field">
</body>

顯示如下:

:checked 當radio button 或 checkbox 在勾選狀態時，會套用CSS。

<style>
input.item:checked + label{
            background-color: #ccc;
            color: red;
        }
</style>
</head>
<body>
<div class="block">
        <input type="checkbox" class="item" id="box">
        <label for="box">選項</label>
</div>
</body>

顯示如下:

:disabled 如果元素有disabled狀態的話，就會套用CSS。

<style>
input.filed2:disabled {
            background-color:gray;
        }
</style>
</head>
<body>
<input type="text" class="field2" disabled>
</body>