Html 仅在边缘中自定义复选框问题

我面临一个奇怪的问题，我为我的个人博客定制了一个复选框。当我发现这种情况时，我正在检查浏览器兼容性

自定义复选框在Chrome、Firefox和IE10中都可以使用。但当我检查Edge时，它不起作用，并且没有应用样式

标签{
显示：内联块；
最大宽度：100%；
}
输入[type='checkbox']{
显示：无；
框大小：边框框；
填充：0；
大纲：无；
边界：无；
背景：透明；
宽度：自动；
}
输入[type='checkbox']：选中+。打勾{
颜色：#16a0de；
}
输入[type='checkbox']+span{
光标：指针；
字体大小：正常；
字体大小：11px；
}
.打钩{
边框：1px实心#666；
填充：0px 1px；
颜色：白色；
保证金：6px 4px 6px 0；
字体大小：正常；
}

✔
文本1

为什么会发生这种情况 Edge默认为表情符号的

Segoe UI表情符号

字体，而不是

Segoe UI符号

如何修复它 要获得一致的结果，请添加

字体系列：Segoe UI符号至
。勾选标记


标签{
显示：内联块；
最大宽度：100%；
}
输入[type='checkbox']{
显示：无；
框大小：边框框；
填充：0；
大纲：无；
边界：无；
背景：透明；
宽度：自动；
}
输入[type='checkbox']：选中+。打勾{
颜色：#16a0de；
}
输入[type='checkbox']+span{
光标：指针；
字体大小：正常；
字体大小：11px；
}
.打钩{
边框：1px实心#666；
颜色：白色；
保证金：6px 4px 6px 0；
字体大小：正常；
字体系列：Segoe用户界面符号；
线高：1米；
最小宽度：1米；
最小高度：1米；
显示：内联块；
文本对齐：居中；
}

✔
文本1
为什么会发生这种情况
Edge默认为表情符号的
Segoe UI表情符号
字体，而不是
Segoe UI符号

如何修复它
要获得一致的结果，请添加
字体系列：Segoe UI符号至
。勾选标记


标签{
显示：内联块；
最大宽度：100%；
}
输入[type='checkbox']{
显示：无；
框大小：边框框；
填充：0；
大纲：无；
边界：无；
背景：透明；
宽度：自动；
}
输入[type='checkbox']：选中+。打勾{
颜色：#16a0de；
}
输入[type='checkbox']+span{
光标：指针；
字体大小：正常；
字体大小：11px；
}
.打钩{
边框：1px实心#666；
颜色：白色；
保证金：6px 4px 6px 0；
字体大小：正常；
字体系列：Segoe用户界面符号；
线高：1米；
最小宽度：1米；
最小高度：1米；
显示：内联块；
文本对齐：居中；
}

✔
文本1
您能告诉我它还可以接受哪些其他字体吗？我尝试了Arial，但它不受支持。我认为
Arial
在其集合中不包含此字符，因此您需要使用类似
Segoe UI-Symbol
的内容。使用Segoe UI-Symbol字体会增加填充，并更改我的复选框的现有设计：（使用字体更改样式的任何解决方案？@tkamath99我做了一些更改，这将使勾选框样式更加一致。您能告诉我它可以接受哪些其他字体吗？我尝试了Arial，但它不受支持。我认为
Arial
在其集合中不包括此字符，因此您需要使用类似
Segoe U的字体。）改为I Symbol
。使用Segoe UI Symbol字体会增加填充，并更改复选框的现有设计：（使用字体更改样式的任何解决方案？@tkamath99我已进行了一些更改，这将使复选框样式更加一致。