数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济
心理学
社会学
时尚
法律带有 CSS 外观属性的自定义复选框
我们使用 appearance 属性根据用户操作系统的平台原生风格对元素进行样式化。自定义复选框外观不同于默认复选框，选中后外观会发生改变。
语法
CSS appearance 属性的语法如下所示 −
Selector {
appearance: /*value*/;
-webkit-appearance: /*value*/; /*for Safari and Chrome */
-moz-appearance: /*value*/; /*for Firefox */
}
创建圆形自定义复选框
若要创建圆形自定义复选框，我们已设置带有 border-radius 和 box-shadow 的以下样式。appearance 设置为 none −
input[type=checkbox] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding: 12px;
background-color: cyan;
box-shadow: inset 0 3px 3px 5px lightgreen;
border-radius:50%;
}
复选框选中后，我们已更改了带有不同背景色、边框和 box-shadow 的外观 −
input[type=checkbox]:checked {
background-color: coral;
border: 6px solid cornflowerblue;
box-shadow: 0 1px 2px lightorange;
}
示例
让我们看一个创建圆形自定义复选框的示例 −
<!DOCTYPE html>
<html>
<style>
input[type=checkbox] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding: 12px;
background-color: cyan;
box-shadow: inset 0 3px 3px 5px lightgreen;
border-radius:50%;
}
input[type=checkbox]:checked {
background-color: coral;
border: 6px solid cornflowerblue;
box-shadow: 0 1px 2px lightorange;
}
input[type=checkbox]:checked:after {
content:"Checked";
}
</style>
<body>
<h1>Education</h1>
<p>Select the degree(s):</p>
<input type="checkbox"> MCA
<input type="checkbox"> BCA
</body>
</html>
创建矩形自定义复选框
若要创建矩形自定义复选框，我们已设置带有 border-radius 和 box-shadow 的以下样式。appearance 设置为 none −
input[type=checkbox] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding: 10px;
background-color: cyan;
border-radius:5%;
}
复选框选中后，我们已更改了外观 −
input[type=checkbox]:checked {
background-color: magenta;
}
我们在选中复选框后使用以下 HTML Unicode 字符对其进行设置 −
content:"\2713";
示例
让我们看一个创建圆形自定义复选框的示例 −
<!DOCTYPE html>
<html>
<style>
input[type=checkbox] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding: 10px;
background-color: cyan;
border-radius:5%;
}
input[type=checkbox]:checked {
background-color: magenta;
}
input[type=checkbox]:checked:before {
content:"\2713";
color: white;
padding: initial;
font-weight: bold;
}
</style>
<body>
<h1>Hobbies</h1>
<p>Select your hobbies:</p>
<input type="checkbox"> Playing Cricket
<input type="checkbox"> Watching Movies
<input type="checkbox"> Gardening
</body>
</html>
更新于：31-10-2023
2K+ 阅读量
广告