手工SEO

手工SEO首页 DEDE教程 正文

CSS input checkbox自定义样式

手工SEO 2020-02-16 10:02:33 DEDE教程 128℃ 手工SEO

代码如下，如有不懂的请加QQ群：126246777
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"> <head> <title>CSS input checkbox自定义样式</title> <style type="text/css"> .compare_button .checkboxcss { cursor: pointer; position: absolute; width: 15px; height: 15px; top: 0; left: 0; background: #f7f7f7; border: 2px solid #f5b34f; border-radius: 5px; } .compare_button { position: relative; } .compare_button .checkboxcss:after { opacity: 0; content: ''; position: absolute; width: 7px; height: 3px; background: transparent; top: 3px; left: 3px; border: 3px solid #1e8cc5; border-top: none; border-right: none; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .compare_button input[type=checkbox]:checked + label:after { opacity: 1; } </style> </head> <body> <div> <input type="checkbox"> <label for="compare_39680"></label> <span>compare text</span> </div> </body> </html>

效果图：

上一篇：css制作的圆，三角形，椭圆，箭头图标

下一篇：两个子DIV float并排后，如何使这两个DIV的高度相同

相关文章

网站分类
标签列表

友情链接

Copyright © 2002-2019 DIYPHP. 手工SEO 版权所有
版权争议与本站无关。如有侵权请邮件与我们联系处理
Copyright © 2017-2022 | 本站由手工SEO提供技术支持 | 网站地图 | 冀ICP备14007366号-2