下面的代码适用于除 IE 之外的所有浏览器。我似乎无法弄清楚如何解决它。我觉得这与选中的前后选择器有关。我认为 webkit-appearance 或 moz-appearance 会解决这个问题,但也没有运气
我这里有一个codepen https://codepen.io/ramageftw/pen/yKWQEe
任何帮助将不胜感激
form__checkbox--marketing {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
width: 62px;
height: 32px;
position: relative;
border-radius: 50px;
border: 1px solid #d4d4d4;
cursor: pointer;
background-color: #fff;
transition: background-color ease 0.2s;
-webkit-transition: 0.2s;
float: right;
margin-left: 20px;
}
.form__checkbox--marketing {
&:before {
content: "";
display: block;
position: absolute;
width: 30px;
height: 30px;
background: #fff;
left: 0px;
top: -1px;
border-radius: 50%;
border: 1px solid #d4d4d4;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
transition: 0.2s;
-webkit-transition: 0.2s;
}
}
.form__checkbox--marketing {
&:checked {
background-color: #6CAF20;
border-color: #6CAF20;
&:before {
left: 30px;
border-color: #6CAF20;
}
&:after {
content: '';
width: 17px;
height: 16px;
position: absolute;
top: 7px;
right: 6px;
background: url('/assets/source/global/img/valid.png');
}
}
}
最佳答案
使用伪元素 :before
和 :after
在任何 input
元素无效。它不支持全局。此外,输入是一个自闭合元素,因此无需使用闭合输入标签。
正如 MDN 文档所说
因此尝试将您的输入包装到 label
中并使用 span
对于伪元素。
.form__checkbox--marketing {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
width: 62px;
height: 32px;
position: relative;
border-radius: 50px;
border: 1px solid #d4d4d4;
cursor: pointer;
background-color: #fff;
transition: background-color ease 0.2s;
-webkit-transition: 0.2s;
float: left;
margin-left: 20px;
}
.form__checkbox--marketing:before {
content: "";
display: block;
position: absolute;
width: 30px;
height: 30px;
background: #fff;
left: 0px;
top: -1px;
border-radius: 50%;
border: 1px solid #d4d4d4;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
transition: 0.2s;
-webkit-transition: 0.2s;
}
input[type=checkbox]:checked+.form__checkbox--marketing {
background-color: #6CAF20;
border-color: #6CAF20;
}
input[type=checkbox]:checked+.form__checkbox--marketing:after {
content: '';
width: 17px;
height: 16px;
position: absolute;
top: 7px;
right: 6px;
background: url('https://image.ibb.co/m7PoE7/valid.png');
}
input[type=checkbox]:checked+.form__checkbox--marketing:before {
left: 30px;
border-color: #6CAF20;
}
input[type=checkbox] {
display: none;
}
<label>
<input name="marketing" id="join-form-marketing--modal" class="form__checkbox form__checkbox--modal" type="checkbox" />
<span class="form__checkbox--marketing"></span>
</label>
关于html - 检查伪选择器在 IE 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49820332/