修改radio的选中颜⾊为红⾊
修改radio选中颜⾊为蓝⾊
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible"content="IE=edge,chrome=1">
<title>修改radio的选中颜⾊为红⾊</title>
<meta name="description"content="">
<meta name="keywords"content="">
<link href=""rel="stylesheet">
<script crossorigin="anonymous"integrity="sha384-6ePHh72Rl3hKio4HiJ841psfsRJveeS+aLoaEf3BWfS+gTF0XdAqku2ka8VddikM"src="lib.baom itu/jquery/1.11.3/jquery.min.js"></script>
<style type="text/css">
.choose{
position: relative;
}
.choose .radio{
position: relative;
display: inline-block;
font-weight: 400;
color: #0c4757;
padding-left: 25px;
cursor: pointer;
}
.choose .radio input{
position: absolute;
left: -9999px;
}
.choose .radio i{
display: block;
position: absolute;
top: 3px;
left: 0;
width: 15px;
height: 15px;
outline: 0;
border: 1px solid #e4e4e4;
background: #ffffff;
border-radius: 50%;
transition: border-color .3s;
-webkit-transition: border-color .3s;
}absolute relative
.choose .radio input[checked="checked"]+i{
border-color: blue;
}
.choose .radio input+i:after{
position: absolute;
content:'';
top: 3px;
left: 3px;
width: 9px;
height: 9px;
border-radius: 50%;
background-color: blue;
opacity: 0;
transition: opacity .1s;
-webkit-transition: opacity .1s;
}
.choose .radio input:checked+i:after{
.choose .radio input:checked+i:after{
opacity: 1;
}
</style>
</head>
<body>
<div class="choose">
<label class="radio">选项1<input type="radio"name="radio"value="1"checked="checked"><i></i></label> <label class="radio">选项2<input type="radio"value="2"name="radio"><i></i></label>
</div>
<script type="text/javascript">
$(function(){
$(".radio").find('input').click(function(){
$(this).parent('label').siblings('label').find('input').removeAttr('checked')&&$(this).attr('checked','checked');
})
})
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。