[英]Checked pseudo selectors not working in IE
以下代碼可用於除IE之外的所有瀏覽器。 我似乎無法弄清楚如何解決它。 我覺得這與檢查器中的選擇器之前和之后有關。 我以為Webkit外觀或Moz外觀會解決問題,但那里也沒有運氣
我在這里有一個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');
}
}
}
在任何input
元素上使用偽元素:before
和:after
無效。 它不全局支持。 輸入也是一個自動關閉元素,因此不需要使用關閉輸入標簽。
正如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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.