html复选框checkbox样式美化

炫客网 • • 炫客网 • 建站教程 • 阅读 584
赞助

思路：使用label结合checkbox，背景图片进行美化。

原理：

1. for 属性规定 label 与哪个表单元素绑定，显式绑定和隐式绑定,均可实现checkbox的选用与取消效果，具体见：<label> 标签的 for 属性

编码实现：

这里我们通过隐藏默认的checkbox,添加一个行内元素span并控制span在checkbox不同状态下的样式即可。

1.html:

<label class="my_protocol">

<input class="input_agreement_protocol" type="checkbox" />

<span></span>

</label>

2. css:

/*隐藏掉我们模型的checkbox*/

.my_protocol .input_agreement_protocol {

appearance: none;

-webkit-appearance: none;

outline: none;

display: none;

}

/*未选中时*/

.my_protocol .input_agreement_protocol+span {

width: 16px;

height: 16px;

background-color: red;

display: inline-block;

background: url(../../Images/TalentsRegister/icon_checkbox.png) no-repeat;

background-position-x: 0px;

background-position-y: -25px;

position: relative;

top: 3px;

}

/*选中checkbox时,修改背景图片的位置*/

.my_protocol .input_agreement_protocol:checked+span {

background-position: 0 0px

}
1、本站所有资源来源于用户上传和网络，版权争议与本站无关，版权归原创者所有，如有侵权请邮件联系我们！
2、分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3、不得使用于非法商业用途，商用请购买正版，不得违反国家法律。否则后果自负！
4、本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5、如有链接无法下载、失效或广告，请联系管理员处理！
6、本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7、不保证所有资源都完整可用，不排除存在加密、BUG、需要授权或者残缺的可能，由于资源的特殊性，下载后一律不予退货！
8、本文来自炫客网搜集整理，如有侵权请联系管理员删除，转载请注明出处：https://www.xuankewang.com/1384.html
赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
炫客网炫客网管理团队
0
上一篇 2022-02-11 00:57
下一篇 2022-02-11 05:59
赞助

猜你喜欢

联系我们

173-662-005

在线咨询： QQ交谈

邮件：woowuo@126.com

工作时间：周一至周五，10:30-18:30，节假日休息

关注微信
1、本站所有资源版权归原创者所有，如有侵权请邮件联系我们！
2、分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3、不得用于非法商业用途，商用请购买正版，不得违反国家法律，否则后果自负！
4、本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5、如有链接无法下载、失效或广告，请联系管理员处理！
6、本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7、不保证所有资源都完整可用，不排除存在加密、BUG、需授权或者残缺的可能。
8、由于资源源码的特殊性及可复制性，购买后一律不予退货，请谨慎选购。
我已知晓并同意