演示(在iPhone上预览):
你需要添加
variation selector-15 (U+FE0E)
解决这个问题
变化
content: '\2714';
到
content: '\2714\fe0e';
/* Customize the label (the container) */
.checkbox-label {
display: block;
position: relative;
padding-left: 40px;
margin-bottom: 20px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #0A0;
}
/* Hide the browser's default checkbox */
.checkbox-label input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 30px;
width: 30px;
border: 1px solid goldenrod;
color: #0A0;
}
/* Create the checkmark/indicator (hidden when not checked) */
/* Style the checkmark/indicator */
.checkmark:after {
content: '\2714\fe0e';
display: none;
font-size: 36px;
margin: -15px 0 0 0;
color: #0A0;
// color: red;
}
/* Show the checkmark when checked */
.checkbox-label input:checked ~ .checkmark:after {
display: block;
color: #0A0 !important;
}
<label class="checkbox-label">
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
