当我们在制作网页时,想改变input框的样式,比如改变它的边框颜色或形状而没法改变时,我们考虑运用伪元素来设置,其方法如下:
样式一:
html代码:
<ul class="uls">
<span>
<input type="checkbox" class="input_check" id="check1">
<label for="check1"></label>
</span>
</ul>
css代码:
body{
background: skyblue;
}
.uls span {
position: relative;
}
.uls .input_check {
position: absolute;
visibility: hidden;
left:5px;
top:5px;
}
.uls .input_check+label {
display: inline-block;
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
border: 2px solid #f61a63;
display: flex;
}
.uls .input_check:checked+label:after {
content: "";
position: absolute;
left: 5px;
bottom: .66rem;
width: 1rem;
height: 6px;
border: 2px solid #e92333;
border-top-color: transparent;
border-right-color: transparent;
-ms-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
transform: rotate(-45deg);
}
效果图如下所示:
样式二:
html代码:
<div class="checkbox">
<input type="checkbox" id="checkBox">
<label for="checkBox">Remeber Me</label>
</div>
css代码:
body{
background: pink;
}
/* 隐藏复选框 */
[type=checkbox]{
display: none;
}
/* 复选框和label的起始属性 */
[type=checkbox]+label {
font-weight: 300;
position: relative;
padding-left: 35px;
margin-left: 10px;
cursor: pointer;
display: inline-block;
height: 25px;
line-height: 25px;
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-ms-user-select: none;
}
* 复选框未选中时的属性 */
[type=checkbox]+label:before,
[type=checkbox]:not(.filled-in)+label:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 18px;
height: 18px;
z-index: 0;
border: 2px solid #5a5a5a;
border-radius: 1px;
margin-top: 2px;
-webkit-transition: .2s;
-o-transition: .2s;
transition: .2s;
}
/* 复选框选中时的属性 */
[type=checkbox]:checked+label:before {
top: -4px;
left: -5px;
width: 12px;
height: 22px;
border: none;
border-top: 2px solid transparent;
border-left: 2px solid transparent;
border-right: 2px solid #3e8ef7;
border-bottom: 2px solid #3e8ef7;
-webkit-transform: rotate(40deg);
-ms-transform: rotate(40deg);
transform: rotate(40deg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
/* 当复选框选中时,取消未选中时的边框 */
[type=checkbox]:not(.filled-in)+label:after {
border: 0;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
.checkbox{
float: left;
margin-left: 200px;
margin-top: 200px;
}
效果如下图所示: