我想像下面这样设置复选框的样式:
这是我的CSS:
.checkboxcontact input[type="checkbox"] {
-webkit-appearance: none;
background-color: white;
border: 1px solid #d44803;
padding: 9px;
border-radius: 3px;
display: inline-block;
position: relative;
float:left;
}
.checkboxcontact input[type="checkbox"]:checked {
background-color: #d44803;
border: 1px solid white;
color: #fff;
}
.checkboxcontact input[type="checkbox"]:checked:after {
content: '\2714';
font-size: 14px;
position: absolute;
top: 0;
left: 3px;
color: #fff;
font-family: "FontAwesome";
}
这在台式机和手机上的 Chrome 上显示完美。
但问题在于 iPhone 上的 Safari。显示如下:
我该如何解决这个问题?有回退之类的吗?
最佳答案
正如上面所建议的,伪元素不能很好地处理输入,但是,将复选框包含在标签中是个好主意——它是 w3c 有效的,因此它按预期工作,您不必为标签使用 for
标记,也不必为输入复选框使用 id
。
这是 HTML:
<label class="custom-checkbox">
<input type="checkbox" value="checkbox1">
<span>Checkbox</span>
</label>
代码足够通用,所以如果您只需要复选框,没有标签,您只需将 span 留空 - 但您必须保留标签 - 或者您可以创建自己的自定义类来应用伪元素在标签本身上。
这是 CSS:
.custom-checkbox {
position: relative;
display: block;
margin-top: 10px;
margin-bottom: 10px;
line-height: 20px;
}
.custom-checkbox span {
display: block;
margin-left: 20px;
padding-left: 7px;
line-height: 20px;
text-align: left;
}
.custom-checkbox span::before {
content: "";
display: block;
position: absolute;
width: 20px;
height: 20px;
top: 0;
left: 0;
background: #fdfdfd;
border: 1px solid #e4e5e7;
@include vendorize(box-shadow, inset 2px 2px 0px 0px rgba(0, 0, 0, 0.1));
}
.custom-checkbox span::after {
display: block;
position: absolute;
width: 20px;
height: 20px;
top: 0;
left: 0;
font-size: 18px;
color: #0087b7;
line-height: 20px;
text-align: center;
}
.custom-checkbox input[type="checkbox"] {
opacity: 0;
z-index: -1;
position: absolute;
}
.custom-checkbox input[type="checkbox"]:checked + span::after {
font-family: "FontAwesome";
content: "\f00c";
background:#d44803;
color:#fff;
}
这是一个有效的 fiddle : https://jsfiddle.net/ee1uhb3g/
在所有浏览器上经过验证测试 - FF、Chrome、Safari、IE 等
关于html - 复选框样式在 Safari 移动设备上不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47410396/