怎么利用纯CSS改变html页面效果
这篇文章主要介绍怎么利用纯CSS改变html页面效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
成都创新互联公司专业为企业提供湄潭网站建设、湄潭做网站、湄潭网站设计、湄潭网站制作等企业网站建设、网页设计与制作、湄潭企业网站模板建站服务,10余年湄潭做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
CSS代码:
input[type=checkbox] { margin-right: 5px; cursor: pointer; font-size: 14px; width: 15px; height: 12px; position: relative; } input[type=checkbox]:after { position: absolute; width: 10px; height: 15px; top: 0; content: " "; background-color: #ff0000; color: #fff; display: inline-block; visibility: visible; padding: 0px 3px; border-radius: 3px; } input[type=checkbox]:checked:after { content: "✓"; font-size: 12px; } input[type=radio] { margin-right: 5px; cursor: pointer; font-size: 14px; width: 15px; height: 12px; position: relative; } input[type=radio]:after { position: absolute; width: 10px; height: 15px; top: 0; content: " "; background-color: #ff0000; color: #fff; display: inline-block; visibility: visible; padding: 0px 3px; border-radius: 50%; } input[type=radio]:checked:before { content: "✓"; display: block; position: relative; top: -2px; left: 3px; width: 6px; height: 6px; color: #fff; font-weight: 400; z-index: 1; }
HTML 示例:
plus
minus
plus
minus
以上是怎么利用纯CSS改变html页面效果的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
文章名称:怎么利用纯CSS改变html页面效果
文章出自:http://scyanting.com/article/psdpci.html