css 绘制checkbox,radio

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>复选框效果</title> <style> form{border: 1px solid #ccc;padding: 20px;width: 300px;margin: 30px auto;} .wrapper{margin-bottom: 10px;} .box{display: inline-block;position: relative;width: 20px;height: 20px;border: 2px solid orange;} .box input{position: absolute;top: 0;left: 0;top: -3px;left: -4px;width: 21px;height: 21px; opacity: 0;cursor: pointer;z-index: 5; } .box span{position: absolute;top: 1px; right: 6px;font-size: 19px;font-weight: bold;font-family: Arial; -webkit-transform: rotate(18deg); -moz-transform: rotate(18deg); -ms-transform: rotate(18deg); -o-transform: rotate(18deg); transform: rotate(18deg);color: orange;} input[type="checkbox"]+span{opacity: 0;} input[type="checkbox"]:checked+span{opacity: 1;} </style> </head> <body> 更多资料免费分享加群 120342833 验证回答 ZZ

<form action="#">
<input type="checkbox" checked id="userName" />
<label for="userName">我是选中状态</label>
<input type="checkbox" id="userNum" />
<label for="userNum">我是未选中状态</label>
</form>

</body> </html>

跟帖

java的公益学习交流平台【Java互动交流群】群号256242993,全部免费保你快速入门,每周定期有公开直播课,想学习你就来,从零到大神的成功之路,从你相信我开始!!!

沙发

课工场官网课程一起来“打价”,找群内管理员还可以折上折,快点行动吧~~~ 课工场官网注册UID获取免费学习视频课,http://www.kgc.cn/?tuin=7133

板凳

横跨屏幕的轮播首图是时下流行的网页设计手法,设计师通过覆盖视野式的图片来营造身临其境的体验,这非常符合人类视觉优先的信息获取方式,所以,漂亮的首图是抓住用户注意力的重要手段。优质的首图能够让用户明白,他们可以从这个网站获取一些什么。 交流群 前端/JAVA/PHP学习交流群enter image description here

地板
说几句
广告位 点击查看投放指南

我的收藏