纯css实现checkbox的checked样式

站长手记 作者: 2024-08-28 01:00:01
今天使用微信的WEUI的checkbox的时候,发现点击checkbox是有checked和unchecked的变化的,但是想要去获得checkbox的checked状态时,发现event listener里居然没有该checkbox的click之类的事件。

先看看html代码

<div class="weui-cells weui-cells_checkbox">
    <label class="weui-cell weui-check__label" for="s11">
        <div class="weui-cell__hd">
            <input type="checkbox" class="weui-check" name="checkbox1" id="s11" checked="checked">
            <i class="weui-icon-checked"></i>
        </div>
        <div class="weui-cell__bd">
            <p>standard is dealt for u.</p>
        </div>
    </label>
</div>

看看weui里checkbox的css是如何写的

.weui-cells_checkbox .weui-icon-checked:before{
  content:'\EA01';
  color:#c9c9c9;
  font-size:23px;
  display:block;
}
.weui-cells_checkbox .weui-check:checked + .weui-icon-checked:before{
  content:'\EA06';
  color:#09BB07;
}

css选择器中‘+‘代表什么?

css中:checked‘是什么意思?

content对应的值是啥?

.weui-cells_checkbox .weui-icon-checked:before{
  content:'\EA01';
  color:#c9c9c9;
  font-size:23px;
  display:block;
}
.weui-cells_checkbox .weui-check:checked + .weui-icon-checked:before{
  content:'\EA06';
  color:#09BB07;
}

总结

原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_69846.html
checkbox checked样式