html - 自定义复选框 - 与 Chrome、FireFox 和 Safari 的兼容性
问题描述
我在我的网站上使用自定义复选框。我的问题是 Chrome 和 Firefox 的视觉效果给我一个小白框,如下图所示:
问题:我不是网络专家,我需要一些帮助来解决这个问题。提前致谢。
CSS:
input[type="checkbox"] {
position: relative;
display: inline-block;
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;
height: 25px;
width: 50px;
font-size: 25px;
border-radius: 1.5em;
background-color: #222;
border-color: transparent;
background-clip: padding-box;
color: white;
vertical-align: middle;
-webkit-transition: all 0.25s linear 0.25s;
transition: all 0.25s linear 0.25s;
-moz-appearance:none;
-webkit-appearance:none;
-o-appearance:none;
}
input[type="checkbox"]::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 50%;
background-color: white;
border-radius: 100%;
border: 0.125em solid transparent;
background-clip: padding-box;
z-index: 3;
-webkit-transform-origin: right center;
transform-origin: right center;
}
input[type="checkbox"]::after {
position: absolute;
left: 0.675em;
top: 0;
line-height: 2;
font-family: "Ionicons";
content: "";
letter-spacing: 1em;
z-index: 1;
}
input[type="checkbox"]:focus {
color: white;
border-color: transparent;
background-color: #919FAF;
outline: none;
}
td input[type="checkbox"]:checked {
color: white;
background-color: rgba(128, 201, 20,1);
border-color: transparent;
}
HTML:
<input type="checkbox" onchange="check_prop()"/>
解决方案
这为 Chrome 修复了它。我还没有为Firefox尝试过。将 z-index 更改为 -1。
input[type="checkbox"]::after {
position: absolute;
left: 0.675em;
top: 0;
line-height: 2;
font-family: "Ionicons";
content: "";
letter-spacing: 1em;
z-index: -1;
}
推荐阅读
- node.js - mongoose 创建和更新 _ nodejs mongoose
- c++ - 使用自己的 istream_iterator 封装数据访问
- mongoose - 如何在猫鼬中使用 UpdateMany
- php - 用php去除html代码和空格
- javascript - 如何在云功能中访问 firebase 数据库中的其他数据?
- material-ui - /styles/withStyles defaultTheme 选项,不能设置自定义主题
- ruby-on-rails - Rails one_to_many 关联不起作用
- uml - 如何绘制带有嵌套 if 语句的 UML 图?
- multi-select - Slack 应用程序是否支持消息菜单中的多选下拉菜单?
- c - 套接字的半关闭是否会导致 epoll 停止接收事件?