自定义checkbox样式
2019-03-28 本文已影响0人
愤的小鸟怒
<style>
.global-checkbox__label--margin-10::before{
margin-right: 0.625rem;
}
.global-checkbox__box:focus + .global-checkbox__label::before {
box-shadow: 0 0 .1em .1em #061E52;
}
.global-checkbox__box + .global-checkbox__label::before {
content: "\a0"; /*不换行空格*/
display: inline-block;
width: 1.55vw;
height: 1.69rem;
border-radius: 0.25rem;
background-color:white;
border: 0.125rem solid #000000;
text-align: center;
line-height: 1.69rem; /*行高不加单位，子元素将继承数字乘以自身字体尺寸而非父元素行高*/
}
.global-checkbox__box:checked + .global-checkbox__label--white::before {
/* content: "\2713"; */
background: url('./img/checkbox-content.png') no-repeat;
background-size: 0.625rem 0.44rem;
background-color: #ffffff;
background-position: center;
}
.global-checkbox__box:checked + .global-checkbox__label--black::before {
/* content: "\2713"; */
background: url('./img/checkbox-content-white.png') no-repeat;
background-size: 0.625rem 0.44rem;
background-color: #000000;
background-position: center;
}
.global-checkbox__box {
position: absolute;
clip: rect(0, 0, 0, 0);
/* visibility: hidden; 使用visibility会导致无法显示focus情况下的样式*/
}
.global-checkbox__box:disabled + .global-checkbox__label::before {
background-color: gray;
box-shadow: none;
color: #555;
}
</style>
<body>
<div class="global-checkbox">
<input class="global-checkbox__box " type="checkbox" id="awesome" />
<label class="global-checkbox__label global-checkbox__label--margin-10 global-checkbox__label--black" for="awesome">Awesome!</label>
</div>
</body>
