資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法學研究如何使用 CSS 樣式化與選定的單選按鈕和已勾選的複選框關聯的標籤？
要使用 CSS 為與選定的單選按鈕和已勾選的複選框關聯的標籤設定樣式，這是 表單 中的一項重要任務，因為它使識別使用者選擇的選項變得更容易。在本文中，我們將瞭解如何使用 :checked 偽類選擇器和 CSS 組合器 使用 CSS 為與選定的單選按鈕和已勾選的複選框關聯的標籤設定樣式。
我們有三個單選按鈕和三個複選框，我們的任務是使用 CSS 為與選定的單選按鈕和已勾選的複選框關聯的標籤設定樣式。
設定已勾選單選按鈕和複選框的標籤樣式
- 我們使用 input 標籤和 type 屬性（設定為 radio）建立了三個單選按鈕，並使用 type 屬性（設定為 checkbox）建立了三個複選框。
- 然後，我們使用 label 標籤為每個單選按鈕和複選框建立了標籤。
- 我們使用了 **"input[type="radio"]:checked"**，它選擇所有已勾選的單選按鈕。
- 之後，我們將 **"+label"** 與上一步一起使用，它選擇相應已勾選單選按鈕的標籤。
- 類似地，我們使用了 **"input[type="checkbox"]:checked+label"**，它選擇相應已勾選複選框的標籤。
- 最後，我們使用了 CSS background-color、color 和 font-weight 屬性，它們將標籤的背景設定為綠色，文字顏色設定為白色且加粗。
示例 1
這是一個完整的示例程式碼，它實現了上述步驟，以使用 CSS 為與選定的單選按鈕和已勾選的複選框關聯的標籤設定樣式。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
To style label associated with selected
radio input and checked checkboxes using
CSS
</title>
<style>
.radio_button input[type="radio"]:checked+label,
input[type="checkbox"]:checked+label {
background-color: #04af2f;
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<h3>
To style label associated with selected
radio input and checked checkboxes using
CSS
</h3>
<p>
In this example we have used <strong>checked
</strong> psuedo-class selector to style label
for checked radio and checkboxes using CSS.
</p>
<div class="radio_button">
<input type="radio" id="option1" name="options" />
<label for="option1">Option 1</label>
<br>
<input type="radio" id="option2" name="options" />
<label for="option2">Option 2</label>
<br>
<input type="radio" id="option3" name="options" />
<label for="option3">Option 3</label>
<br>
<input type="checkbox" id="option4" name="options" />
<label for="option4">Option 4</label>
<br>
<input type="checkbox" id="option5" name="options" />
<label for="option5">Option 5</label>
<br>
<input type="checkbox" id="option6" name="options" />
<label for="option6">Option 6</label>
</div>
</body>
</html>
示例 2
此示例僅設定您想要設定樣式的已勾選單選按鈕和複選框標籤的樣式。為此，我們使用了 **普通同胞組合器 (~)**。此處樣式僅應用於 **選項 1** 和 **選項 5** 的標籤。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
To style label associated with selected
radio input and checked checkboxes using
CSS
</title>
<style>
.radio_button input[type="radio"]:checked
~label[for="option1"],
input[type="checkbox"]:checked~
label[for="option5"] {
background-color: #04af2f;
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<h3>
To style label associated with selected
radio input and checked checkboxes using
CSS
</h3>
<p>
In this example we have used <strong>checked
</strong> psuedo-class selector with sibling
combinator(~) to style label for selected radio
and checkboxes using CSS. Here <strong>option 1</strong>
and <strong>option 5</strong> will have change in style.
</p>
<div class="radio_button">
<input type="radio" id="option1" name="options"/>
<label for="option1">Option 1</label>
<br>
<input type="radio" id="option2" name="options"/>
<label for="option2">Option 2</label>
<br>
<input type="radio" id="option3" name="options"/>
<label for="option3">Option 3</label>
<br>
<input type="checkbox" id="option4" name="options"/>
<label for="option4">Option 4</label>
<br>
<input type="checkbox" id="option5" name="options"/>
<label for="option5">Option 5</label>
<br>
<input type="checkbox" id="option6" name="options"/>
<label for="option6">Option 6</label>
</div>
</body>
</html>
結論
在本文中，我們瞭解瞭如何在 CSS 的幫助下，使用 CSS **:checked** 偽類選擇器和 CSS **組合器** 為與選定的單選按鈕和已勾選的複選框關聯的標籤設定樣式。
更新於：2024年8月21日
3K+ 次瀏覽
廣告