html - 自定义复选框在 Safari 上不起作用
问题描述
我的网站上有一个自定义复选框,选中后会显示一个fontawesome
勾号。这在 Firefox 上完美运行,但在其他浏览器上,当我单击它时没有显示任何内容。在 Edge 上,它出现了一个灰色的小方块,但不是整个刻度。
请在下面找到我的自定义复选框的 CSS:
.newsletter input[type="checkbox"]:checked::after {
content: "\f00c";
color: #fff;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.newsletter input[type="checkbox"] {
padding: 7px 7px !important;
height: 10px !important;
width: 10px !important;
display: inline-block !important;
border: 1px #000 solid;
background-color: #fff;
}
input[type="checkbox"] {
padding: 2px;
border: 4px solid #fff;
border-radius: 100%;
width: 20px;
height: 20px;
background-origin: content-box;
box-shadow: 0 0 0 1px #999;
-webkit-appearance: none;
border-radius: 0;
}
input:checked {
background-color: #3795f8;
}
input {
-webkit-appearance: none;
appearance: none;
-webkit-border-radius: 0;
border-radius: 0;
border: 1px solid #ddd;
padding: 10px 5px;
font-size: 1em;
display: block;
width: 100%;
margin-top: 5px;
}
input, select {
vertical-align: middle;
-webkit-border-radius: 0;
border-radius: 0;
padding: 0;
margin: 0;
margin-top: 0px;
}
有人可以建议我如何解决我的问题吗?
解决方案
推荐阅读
- apache-beam - Apache Beam SQLTransform:没有架构时无法调用 getSchema
- r - 有没有办法循环过滤器的级别并在 R 中生成输出?
- c++ - 了解 Rcpp 插件
- c++ - 当 boost::binding 模板化函数时,模板参数推导/替换失败
- android - 广播动态注册,“onReceive”未调用
- pyspark - Spark-提交日期参数
- reactjs - 在 react-admin 中显示网格列值的总数
- performance - APL 如何优化以在阵列处理方面具有出色的性能?它执行了哪些示例技巧和优化?
- javascript - 有人可以向我解释 OpenSeadragon 如何决定金字塔 .tiff 图像中的平铺尺寸吗?
- visual-studio - 有没有办法在 Visual Studio 中观察 shared_ptr 的使用情况?