自定义设置css checkbox样式

最新推荐文章于 2024-03-23 08:00:00 发布

转载最新推荐文章于 2024-03-23 08:00:00 发布 · 398 阅读

本文介绍了一种使用CSS来自定义HTML中复选框样式的详细方法，包括更改默认外观、实现活动状态和悬停效果等，同时展示了如何在复选框被选中时显示一张图片。

1.html

<div>
<input
type="checkbox" />123
</div>

2.css样式

<style>
input[type=checkbox],
input[type=radio] {
-webkit-appearance:
none;
width:
15px;
height:
15px;
margin:
0;
cursor:
pointer;
vertical-align:
bottom;
background:
#fff;
border:
1px 
solid #54B6FF;
-webkit-border-radius:
1px;
-moz-border-radius:
1px;
border-radius:
3px;
-webkit-box-sizing:
border-box;
-moz-box-sizing:
border-box;
box-sizing:
border-box;
position:
relative;
}
input[type=checkbox]:active,
input[type=radio]:active {
border-color:
#54B6FF;
background:
#ebebeb;
}
input[type=checkbox]:hover
 {
border-color:
#c6c6c6;
-webkit-box-shadow:
inset 
0 2px
2px 
rgba(0,
0, 0,
0.1);
-moz-box-shadow:
inset 
0 2px
2px 
rgba(0,
0, 0,
0.1);
box-shadow:
inset 
0 2px
2px 
rgba(0,
0, 0,
0.1);
}
input[type=checkbox]:checked,
input[type=radio]:checked {
background:
#fff;
}
input[type=checkbox]:checked::after
 {
content:
url('img/select.png');
display:
block;
position:
absolute;
/* top: -7px; */
right:
0px;
/* left: -7px */
}
input[type=checkbox]:focus
 {
outline:
none;
border-color:
#54B6FF;
}
</style>