IT培训网

达内论坛

 找回密码
 立即注册
搜索
查看: 1132|回复: 0

怎样用css 绘制checkbox,radio

[复制链接]

2052

主题

2251

帖子

7731

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
7731
QQ
发表于 2017-6-28 13:39:42 | 显示全部楼层 |阅读模式
<!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>





上一篇:浅谈php中var_dump()函数
下一篇:讲述JavaScript 中的 for 循环的使用
回复

使用道具 举报

2052

主题

2251

帖子

7731

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
7731
QQ
 楼主| 发表于 6 天前 | 显示全部楼层
向上箭头

/**css*/

.top{

position: absolute;

}

.top:before,.top:after{

position: absolute;

content: '';

border-top: 10px transparent dashed;

border-left: 10px transparent dashed;

border-right: 10px transparent dashed;

border-bottom: 10px #fff solid;

}

.top:before{

border-bottom: 10px #0099CC solid;

}

.top:after{

top: 1px; /*覆盖并错开1px*/

border-bottom: 10px #fff solid;

}

/**html*/
回复 支持 反对

使用道具 举报

2052

主题

2251

帖子

7731

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
7731
QQ
 楼主| 发表于 6 天前 | 显示全部楼层
向左箭头

/**css*/

.left{

position: absolute;

}

.left:before,.left:after{

position: absolute;

content: '';

border-top: 10px transparent dashed;

border-left: 10px transparent dashed;

border-bottom: 10px transparent dashed;

border-right: 10px #fff solid;

}

.left:before{

border-right: 10px #0099CC solid;

}

.left:after{

left: 1px; /*覆盖并错开1px*/

border-right: 10px #fff solid;

}

/**html*/
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

IT培训网

QQ|小黑屋|手机版|cnitedu Inc. ( 豫ICP备16023996号-1 )

GMT+8, 2019-10-15 02:59 , Processed in 0.105310 second(s), 10 queries , File On.

Powered by Discuz! X3.3

© 2011-2017 cnitedu Inc.

快速回复 返回顶部 返回列表