目次
チェックボックス
<div class="cbWpr">
<label class="cbUnit" for="s1">
<input type="checkbox" class="option-input02 checkbox" id="s1">
<span class="exbold">非排他的選択肢</span>
</label>
</div>.cbWpr {
display: flex;
flex-wrap: wrap;
margin: 0;
}
.cbWpr label.cbUnit {
display: inline-block;
margin: 0 20px 0 0;
font-size: 16px;
line-height: 40px;
cursor: pointer;
}
.cbWpr label.cbUnit input {
position: relative;
width: 18px;
height: 18px;
margin-right: .5rem;
margin-bottom: 2px;
cursor: pointer;
transition: all 0.15s ease-out 0s;
outline: none;
background: #FFF;
border: 2px solid #CFCFCF;
-webkit-appearance: none;
appearance: none;
}
.cbWpr label.cbUnit input:hover,
.cbWpr label.cbUnit input:checked {
background: #F6F6F6;
}
.cbWpr label.cbUnit input:checked::before {
font-size: 18px;
line-height: 24px;
position: absolute;
display: inline-block;
top: 3px;
left: 3px;
width: 8px;
height: 8px;
content: '';
background-color: #777;
text-align: left;
color: #FFF;
}