手工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的高度相同

网站分类
标签列表