お役立ち

https://www.it-swarm-ja.tech/ja/html/%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E3%81%AE%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E8%A8%AD%E5%AE%9A%E3%81%8Csafari%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB%E3%81%A7%E6%A9%9F%E8%83%BD%E3%81%97%E3%81%AA%E3%81%84/835198416/

https://jsfiddle.net/ee1uhb3g/

Checkbox

.custom-checkbox {
position: relative;
display: block;
margin-top: 10px;
margin-bottom: 10px;
line-height: 20px;
}

.custom-checkbox span {
display: block;
margin-left: 20px;
padding-left: 7px;
line-height: 20px;
text-align: left;
}

.custom-checkbox span::before {
content: “”;
display: block;
position: absolute;
width: 20px;
height: 20px;
top: 0;
left: 0;
background: #fdfdfd;
border: 1px solid #e4e5e7;
@include vendorize(box-shadow, inset 2px 2px 0px 0px rgba(0, 0, 0, 0.1));
}

.custom-checkbox span::after {
display: block;
position: absolute;
width: 20px;
height: 20px;
top: 0;
left: 0;
font-size: 18px;
color: #0087b7;
line-height: 20px;
text-align: center;
}

.custom-checkbox input[type=”checkbox”] {
opacity: 0;
z-index: -1;
position: absolute;
}

.custom-checkbox input[type=”checkbox”]:checked + span::after {
font-family: “FontAwesome”;
content: “\f00c”;
background:#d44803;
color:#fff;
}