資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用 CSS 建立自定義複選框和單選按鈕？
預設複選框和單選按鈕的設計可以使用 CSS 輕鬆更改。還可以為複選框和單選按鈕設定初始、選中和懸停屬性。
自定義複選框
以下是建立自定義複選框的程式碼。首先，設定複選框的容器。每個複選框一個 div 容器。使用 input type checkbox 建立複選框：
<label class="checkboxContainer">Rice <input type="checkbox" checked="checked"> <span class="checkboxMarked"></span> </label> <label class="checkboxContainer">Flour <input type="checkbox"> <span class="checkboxMarked"></span> </label>
上面，第一個複選框使用 checked 屬性預設選中：
<input type="checkbox" checked="checked">
定位容器
複選框容器的位置設定為相對定位。要正確排列複選框，請使用 display 屬性並將值設定為 block：
.checkboxContainer {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
複選框形狀
複選框中的勾號使用 content 屬性設定：
.checkboxMarked:after {
content: "";
position: absolute;
display: none;
}
停用複選框文字
在複選框中，您還需要阻止使用者選擇文字。為此，使用 user-select 屬性並將值設定為 none：
user-select: none;
符號設定為勾號形狀，並使用 transform 屬性和 rotate() 值進行旋轉：
.checkboxContainer .checkboxMarked:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
示例
這是一個示例：
<!DOCTYPE html>
<html>
<style>
.checkboxContainer {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.checkboxContainer input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkboxMarked {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
.checkboxContainer:hover input ~ .checkboxMarked {
background-color: rgb(205, 255, 199);
}
.checkboxContainer input:checked ~ .checkboxMarked {
background-color: rgb(5, 170, 32);
}
.checkboxMarked:after {
content: "";
position: absolute;
display: none;
}
.checkboxContainer input:checked ~ .checkboxMarked:after {
display: block;
}
.checkboxContainer .checkboxMarked:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
</style>
<body>
<h1>Custom Checkbox Example</h1>
<label class="checkboxContainer">Rice
<input type="checkbox" checked="checked">
<span class="checkboxMarked"></span>
</label>
<label class="checkboxContainer">Flour
<input type="checkbox">
<span class="checkboxMarked"></span>
</label>
</body>
</html>
自定義單選按鈕
我們可以輕鬆更改網頁上單選按鈕的外觀。以下是建立自定義單選按鈕的程式碼。讓我們看看步驟。
設定單選按鈕
使用 input type radio 在網頁上建立單選按鈕：
<form> <label for="r1">Male</label> <input type="radio" id="r1" name="btn" value="v1"> <input type="radio" id="r2" name="btn" value="v2"> <label for="r2">Female</label> </form>
移除預設外觀
使用 appearance 屬性並將值設定為 none 可以輕鬆停用單選按鈕的預設外觀：
appearance: none;
可以使用 appearance 和 border-radius 屬性建立自定義複選框。最初將 appearance 設定為 none：
input[type=radio] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding: 10px;
background-color: orange;
border-radius:50%;
}
單選按鈕被選中
單選按鈕被選中後，背景顏色將更改。:checked 選擇器匹配選中的 <input> 單選按鈕：
input[type=radio]:checked {
background-color: magenta;
}
懸停
當滑鼠懸停在單選按鈕上時，游標將更改。cursor 屬性設定為 pointer 以使其看起來可點選。:hover 選擇器用於在滑鼠懸停時選擇元素：
input[type=radio]:hover {
cursor: pointer;
}
示例
以下示例說明了自定義單選按鈕：
<!DOCTYPE html>
<html>
<style>
input[type=radio] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding: 10px;
background-color: orange;
border-radius:50%;
}
input[type=radio]:checked {
background-color: magenta;
}
input[type=radio]:hover {
cursor: pointer;
}
</style>
<body>
<h1>Gender</h1><br/>
<form>
<label for="r1">Male</label>
<input type="radio" id="r1" name="btn" value="v1">
<input type="radio" id="r2" name="btn" value="v2">
<label for="r2">Female</label>
</form>
</body>
</html>
更新於：2023-12-14
244 次瀏覽
廣告