<分区>
<分区>
我们使用以下代码来设置复选框的样式:
.checkbox-default {
display: inline-block;
*display: inline;
vertical-align: middle;
margin: 0;
padding: 0;
width: 22px;
height: 22px;
background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><rect fill="#ffffff" stroke="blue" stroke-width="2" height="16" width="16" /><path fill="#000000" d="M6.7,10.3,4.5,8.1l-.7.7,2.9,2.9,6.2-6.2-.7-.7Z" /><path fill="#000000" d="M6.6,10.2,4.4,8l-.7.7,2.9,2.9,6.2-6.2-.7-.7Z" /></svg>') !important;
border: none;
cursor: pointer;
}
这在 MS Edge 中有效:将鼠标悬停在复选框上会显示一个带有蓝色边框和内部黑色箭头的白色矩形。遗憾的是，这在 Chrome 和 Firefox 中不起作用 - 框在那里(光标更改，我什至可以单击它们)但它们不可见。当我删除“矩形”并且只有“路径”时，它才能在每个浏览器中正确显示。添加例如“圆圈”时的结果相同 - 复选框不再可见。我尝试在 SVG 和许多其他内容中添加组标签，但是当至少有一个像“rect”这样的基元时，我无法显示 CB。我错过了什么吗？
最佳答案
好的，终于找到解决办法了。
您必须将每个十六进制颜色代码中的“#”替换为“%23”，因为 Chrome 和 Firefox 不再喜欢“#”。
关于css - 使用 "rect"或 "circle"等基元时，内联 SVG 不可见，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57888670/