原生實現常用的UI樣式,持續更新...
阿新 • • 發佈:2018-12-20
單選框
<div class="radioBox">
<input type="radio" id="1" name="selection" class="hiddenRadio"/>
<span class="myRadio"></span>
</div>
.radioBox {
display: inline-block;
position: relative;
width: 16px;
height: 16px;
}
.hiddenRadio {
display: inline-block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.myRadio {
display: inline-block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
border-radius: 50%;
border: 1px solid lightgrey;
}
.hiddenRadio:checked+.myRadio {
border: #007bff 1px solid;
}
.hiddenRadio:checked+.myRadio::before {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #007bff;
content: '';
top: 3px;
left: 3px;
}
複選框
<div class="checkbox">
<input type="checkbox" class="hiddenCheck" name="selection">
<span class ="trueMark"></span>
</div>
.checkbox {
padding: 0;
width: 16px;
height: 16px;
position: relative;
display: inline-block;
}
.hiddenCheck {
display: inline-block;
position: absolute;
margin: 0;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
}
.trueMark {
display: inline-block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 1px solid #007bff;
z-index: -1;
}
.hiddenCheck:checked+.trueMark {
background: #007bff;
}
.hiddenCheck:checked+.trueMark::after {
position: absolute;
top: 2px;
left: 2px;
display: inline-block;
width: 10px;
height: 5px;
content: '';
border-bottom: 2.5px solid white;
border-left: 2.5px solid white;
transform: rotate(-45deg);
z-index: -1;
}