10.1 偽類 :focus
CSS 的偽類提供了很棒的工具，能夠在不同狀態下為元素設計樣式。藉由這些工具，可以改善用戶在網頁表單與其他互動元素上的體驗。來看看如何利用偽類 :focus、:hover、:disabled 和 :checked 來為輸入元素 (<input>) 設計樣式。
偽類 :focus 用於當表單元素獲得焦點時。這通常發生在點擊元素或使用 Tab 鍵移動到元素時。調整這些元素的樣式能幫助用戶更好地在表單中導航。
使用範例：
CSS
input:focus {
border-color: #4A90E2;
box-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
outline: none;
}
HTML
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name">
</form>
解釋
border-color: 當元素獲得焦點時改變邊框顏色box-shadow: 在元素周圍增加陰影效果以突出顯示outline: 去掉瀏覽器的預設描邊，替換成自定義樣式
10.2 偽類 :hover
偽類 :hover 用於當用戶鼠標懸停在元素上。這對於提供元素互動時的視覺反饋很有幫助。
使用範例：
CSS
input:hover {
border-color: #50E3C2;
background-color: #F0F8FF;
}
HTML
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</form>
解釋
border-color: 當鼠標懸停在元素上時改變邊框顏色background-color: 當鼠標懸停在元素上時改變背景顏色
10.3 偽類 :disabled
偽類 :disabled 用於那些被停用的表單元素，即不可用和不能被用戶改變的元素。這幫助用戶理解元素無法進行交互。
使用範例：
CSS
input:disabled {
background-color: #E0E0E0;
color: #A0A0A0;
cursor: not-allowed;
}
HTML
<form>
<label for="username">用戶名稱:</label>
<input type="text" id="username" name="username" disabled>
</form>
解釋
background-color: 改變停用元素的背景顏色以顯示其不活躍狀態color: 改變停用元素內的文字顏色cursor: 設置游標為 "not-allowed" 狀態，以視覺上顯示元素不可用
10.4 偽類 :checked
偽類 :checked 用於那些處於選中狀態的 checkbox 和 radio 元素。這讓你可以設計選中的元素，讓它們更為顯眼。
使用範例：
CSS
input[type="checkbox"]:checked,
input[type="radio"]:checked {
background-color: #4A90E2;
border-color: #4A90E2;
}
HTML
<form>
<label>
<input type="checkbox" name="option" checked>
選項 1
</label>
<label>
<input type="checkbox" name="option">
選項 2
</label>
<label>
<input type="radio" name="choice" checked>
選擇 1
</label>
<label>
<input type="radio" name="choice">
選擇 2
</label>
</form>
解釋
background-color: 改變選中元素的背景顏色border-color: 改變選中元素的邊框顏色
GO TO FULL VERSION