首页 > 这个效果怎么通过css实现?

这个效果怎么通过css实现?

如何通过css用代码实现,谢谢!


修改原生label样式,用CSS选择器:checked修改


css:

.remem {
  display: none;
}
.remem + label {
  background:  url(../images/btn11.png) no-repeat;
  background-size: 100%;
  display: inline-block;
  position: relative;
  float: left;
  margin-top: 3px;
  width: 14px;
  height: 14px;
  margin-right: 10px;
}
.menlogin label{
  margin-left: 68px;
}
.remem:checked + label:after {
  content: ' ';
  width: 14px;
  height: 14px;
  position: absolute;
  background: url(../images/btn11-1.png) no-repeat;
  background-size: 100%;
}

html:

<input type="checkbox" name="" value="" checked="checked" class="remem" id="wtsx-radio-2">
 <label for="wtsx-radio-2"></label>
 <span>记住密码</span>
 

差不多就这样吧,我自己的笔记。


我记得有个bootstrap的icheck 项目里也在用 挺简单 也挺坑的 用完源生的input直接废了 要用hasClass判断选中了没有。。

【热门文章】
【热门文章】