css 绘制checkbox,radio

AngleYan
AngleYan 发布于 2017-03-07 14:40:00 浏览:1247 类型:原创 - 随笔 分类:HTML/CSS - css 二维码: 作者原创 版权保护
主要是利用checkbox的checked属性,
第一个:checkbox
<!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>
<form action="#">
    <div class="wrapper">
        <div class="box">
            <input type="checkbox" checked id="userName" /><span>√</span>
        </div>
        <label for="userName">我是选中状态</label>
    </div>
    <div class="wrapper">
        <div class="box">
            <input type="checkbox" id="userNum" /><span>√</span>
        </div>
        <label for="userNum">我是未选中状态</label>
    </div>
</form>

</body>
</html>

第二个:单选框
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单选框</title>
    <style>
        form{width: 300px;padding: 20px;margin: 30px auto;border: 1px solid #cccccc;}
        .wrapper{margin-bottom: 20px;}
        .box{display: inline-block;position: relative;width: 16px;height: 16px;background-color: orange;-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;}
        .box input{position: absolute;    left: -5px;top: -3px;width: 17px;height: 17px;opacity: 0;z-index: 2;cursor:pointer;}
        input[type="radio"] + span{position: absolute;left: 4px; top: 4px;width: 8px;height: 8px;-webkit-border-radius: 4px;-moz-border-radius: 4px; -o-border-radius:4px; border-radius: 4px;background-color: #ffffff;opacity: 0;}
        input[type="radio"]:checked + span{opacity: 1;}

    </style>
</head>
<body>
<form action="#">
    <div class="wrapper">
        <div class="box">
            <input type="radio" checked id="ck" name="aa" /><span></span>
        </div>
        <label for="ck">选择1</label>
    </div>
    <div class="wrapper">
        <div class="box">
            <input type="radio" id="ck2"  name="aa"  /><span></span>
        </div>
        <label for="ck2">选择2</label>
    </div>
</form>
</body>
</html>
z
给个赞 11 人点赞
收藏 25 人收藏
评论 已有 7 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
Lin_Grady
Lin_Grady2017-03-15 15:23:157F
挺好,就是选中状态老看着像是未选中状态,好迷糊
举报 支持 (0) 回复 (0)
765842611
7658426112017-03-10 17:57:276F
我感觉要是能加个动画就更好了
举报 支持 (0) 回复 (0)
hugeannex
hugeannex2017-03-09 15:38:465F
emoticon不明白我说的是啥? //@AngleYan:radio选中后再次点击是没有反选的; //@hugeannex:有个缺点,知道吗?点方框和圆圈无效。。。
举报 支持 (0) 回复 (0)
AngleYan
AngleYan2017-03-09 11:01:214F
radio选中后再次点击是没有反选的; //@hugeannex:有个缺点,知道吗?点方框和圆圈无效。。。
举报 支持 (0) 回复 (1)
hugeannex
hugeannex2017-03-08 13:08:573F
啊,哈哈哈。。。
http://www.qdfuns.com/notes/11445/abe03d970bcfa1f01858aa6e2e378ebd.html
举报 支持 (0) 回复 (0)
hugeannex
hugeannex2017-03-08 12:50:212F
有个缺点,知道吗?点方框和圆圈无效。。。
举报 支持 (0) 回复 (1)
xiongpeiji
xiongpeiji2017-03-08 10:42:351F
学到了
举报 支持 (0) 回复 (0)
AngleYan AngleYan 作者

作者最新