2020-07-14
Custom CSS radio
<label>
<input type="radio" name="group">
<span>Radio1</span>
</label>
body-center {
display: flex;
}
span {
display: flex;
align-items: center;
}
span:before {
content: '';
height: 24px;
width: 24px;
background: #eee;
display: block;
margin-right: .5rem;
border-radius: 100vh;
box-sizing: border-box;
}
input {
display: none;
}
label input:checked ~ span:before {
background-color: blue;
box-shadow: inset 0 0 0 2px blue, inset 0 0 0 .33rem #fff;
}
Comments