input[type=“checked“]

最新推荐文章于 2024-07-10 23:34:24 发布

_大迷糊_

最新推荐文章于 2024-07-10 23:34:24 发布

阅读量130

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_42709466/article/details/132423624

版权

火狐浏览器input[type=“checkbox”]::after 伪元素设置样式不生效

解决办法：
1.另加元素：

### html:
<label class="cont_list_item">
	<div class="cont_list_checkbox">
		<input class="item_check" type="checkbox" />
		<i class="item_check_icon"></i>
	</div>
</label>

### css:
.cont_list_item .item_check+.item_check_icon{
    content:" ";
    display:block;
    border:1px #449FDB solid;
    border-radius:50%;
    position:absolute;top:0;left:0;
    width:15px;height:15px;
} 
/****选中状态****/
.cont_list .cont_list_item .item_check[type="checkbox"]:checked+.item_check_icon{
    background: linear-gradient(to top, #3273C4 0%,#49d9ff 100%);
}

不添加元素，正常写样式：[ 亲测有效，也最简单 ]
通过在 input 上使用以下内容，可以为 Firefox 浏览器启用预期行为input[type=checkbox]：

input[type=checkbox] {
  -moz-appearance:initial // Hack for Firefox Browsers
}
此选项允许您:before在输入元素上使用伪元素，就像它在 Safari、Chrome 和 Opera 浏览器中开箱即用一样：
input[type=checkbox]::before { 
    ...
}

*** 目前moz-appearance是实验技术。更多信息以及浏览器兼容性的概述可以在这里获得：MDN web docs-appearance。