数据结构
网络
关系数据库管理系统 (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 次浏览
广告