我为我的个人博客自定义的复选框遇到了一个奇怪的问题。当我发现这种情况时,我正在检查浏览器兼容性。
自定义复选框在 Chrome、Firefox 和 IE 10 中工作。但是当我检查 Edge 时,它不工作并且没有应用样式。
label {
display: inline-block;
max-width: 100%;
}
input[type='checkbox'] {
display: none;
box-sizing: border-box;
padding: 0;
outline: none;
border: none;
background: transparent;
width: auto;
}
input[type='checkbox']:checked+.tick_mark {
color: #16a0de;
}
input[type='checkbox']+span {
cursor: pointer;
font-weight: normal;
font-size: 11px;
}
.tick_mark {
border: 1px solid #666;
padding: 0px 1px;
color: white;
margin: 6px 4px 6px 0;
font-weight: normal;
}
<label>
<input name="postSelected" class="NonUnSaved" id="chkBlog" type="checkbox" value="4">
<span class="tick_mark">✔</span>
<span class="btntooltip" data-val="checkboxTest">Text 1</span>
</label>
最佳答案
为什么会这样
Edge 默认为表情符号使用 Segoe UI Emoji
字体,而不是 Segoe UI Symbol
。
如何修复
要获得一致的结果,请将 font-family: Segoe UI Symbol;
添加到 .tick_mark
。
label {
display: inline-block;
max-width: 100%;
}
input[type='checkbox'] {
display: none;
box-sizing: border-box;
padding: 0;
outline: none;
border: none;
background: transparent;
width: auto;
}
input[type='checkbox']:checked+.tick_mark {
color: #16a0de;
}
input[type='checkbox']+span {
cursor: pointer;
font-weight: normal;
font-size: 11px;
}
.tick_mark {
border: 1px solid #666;
color: white;
margin: 6px 4px 6px 0;
font-weight: normal;
font-family: Segoe UI Symbol;
line-height: 1em;
min-width: 1em;
min-height: 1em;
display: inline-block;
text-align: center;
}
<label>
<input name="postSelected" class="NonUnSaved" id="chkBlog" type="checkbox" value="4">
<span class="tick_mark">✔</span>
<span class="btntooltip" data-val="checkboxTest">Text 1</span>
</label>
关于html - 仅 Edge 中的自定义复选框问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57411337/