checkbox效果

yb305小白

于 2021-08-26 13:37:05 发布

阅读量105

点赞数

分类专栏： jquery 文章标签： css html jquery

本文链接：https://blog.csdn.net/yb305/article/details/119929582

版权

jquery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选中标签forcheck</title>
<script src="./js/jquery-2.1.1.min.js"></script>
<style type="text/css">
.riskSources label {
cursor: pointer;
position: relative;
display: inline-block;
width: 49px;
height:49px;
border: 1px solid transparent;
}
/**
* 按钮透明
* @type {String}
*/
#riskCheck {
opacity: 0;
}
/**
* checkbox选中样式
* @type {String}
*/
#riskCheck:checked + i {
border-color: blue;
color: blue;
border-width:2px;
}
/**
* i标签的大小
*/
.riskSources i {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 1px solid transparent;
text-align: center;
line-height: 36px;
border-radius: 50%;
margin-left:-3px;
margin-top:-3px;
}

/**
* 选中状态，span(三角形)样式
* @type {String}
*/
#riskCheck:checked + i + span {
display: inline-block;
    position: relative;
    width: 15px;
    padding-top: -80px;
    height: 15px;
    float: right;
    margin-top: 14px;
	margin-right: -5px;
    border-radius: 50%;
    background-color: blue;
	border-width:2px;
}
#riskCheck:checked  +i+ span:before,
#riskCheck:checked +i + span:after {content: '';pointer-events: none;position: absolute;color: white;border: 1px solid;background-color: white;}
#riskCheck:checked + i + span:before {width: 1px;height: 1px;left: 25%;top: 50%;transform: skew(0deg,50deg);}
#riskCheck:checked + i + span:after{width: 3px;height: 1px;left: 45%;top: 42%;transform: skew(0deg,-50deg);}
</style>
<script >
function test(){
	alert($('#riskCheck').is(':checked'));
}
</script>
</head>
<body>
<div class="riskSources" style="
    background: url(./ziyuan3.png) no-repeat;
    border-radius:34px;
    height: 51px;
    width:51px;
    background-size: 100% 100%;
    ">
<label>
<input id="riskCheck" type="checkbox" value="cbEticket" style="  
    background-size: 100% 100%;
    border: 2px solid blue;
    width: 100%;
    ">
	<i></i>
<span></span>
</label>
</div>
<button onclick="test()">测试吧</button>
</body>
</html>

未选中效果：

点击后效果：

图片源：

yb305小白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
checkbox效果

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>选中标签forcheck</title><script src="./js/jquery-2.1.1.min.js"></script><style type="text/css">.riskSources label {cursor: pointer;.
复制链接

扫一扫

专栏目录