html5 - 这个效果怎么通过css实现？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

html5 - 这个效果怎么通过css实现？

PHP中文网 2017-04-17 13:02:13

[HTML讨论组]

509

如何通过css用代码实现，谢谢！

PHP中文网

认证高级PHP讲师

全部回复(3)

阿神2017-04-17 13:04:13 3楼

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>

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

赞 +0

添加回复

高洛峰2017-04-17 13:04:13 2楼

修改原生label样式，用CSS选择器：checked修改

赞 +0

添加回复

PHP中文网2017-04-17 13:04:13 1楼

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

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

关于我们免责申明意见反馈讲师合作广告合作最新更新: php中文网：公益在线php培训，帮助PHP学习者快速成长！; 关注服务号技术交流群

app下载

PHP中文网订阅号: 每天精选资源文章推送

PHP中文网APP: 随时随地碎片化学习

PHP中文网抖音号: 发现有趣的

PHP学习

技术支持

返回顶部