美化type="radio"的样式

最新推荐文章于 2021-12-23 11:07:21 发布

yzy_blog

最新推荐文章于 2021-12-23 11:07:21 发布

阅读量1.7k

点赞数 1

分类专栏：技术 css 文章标签：前端 radio input

本文链接：https://blog.csdn.net/weixin_39466493/article/details/79725335

版权

技术同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

css

11 篇文章 0 订阅

订阅专栏

效果如上图。

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>radio</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui"></head>
<style type="text/css">
div{
position: relative;
line-height: 20px;
}
input[type="radio"]{
z-index: 2;
width: 20px;
height: 20px;
opacity: 0;
}
.radio_label{
position: absolute;
left: 0;
top: 5px;
width: 20px;
height: 20px;
border: 1px solid #999;
}
input:checked+.radio_label {
background-color: #fe6d32;
border: 1px solid #fe6d32;
}
input:checked+.radio_label::after {
position: absolute;
content: "";
width: 5px;
height: 10px;
top: 3px;
left: 6px;
border: 2px solid #fff;
border-top: none;
border-left: none;
transform: rotate(45deg)
}
</style>
<body>
<div>
<input type="radio" name="sex" id="1" value="1">
<label for="1" class="radio_label"></label>
<label for="1">第一个测试</label>
</div>
<div>
<input type="radio" name="sex" id="2" value="2">
<label for="2" class="radio_label"></label>
<label for="2">第一个测试</label>
</div>
<div>
<input type="radio" name="sex" id="3" value="3">
<label for="3" class="radio_label"></label>
<label for="3">第一个测试</label>
</div>
<button id="btnSubmit">提交</button>
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$("#btnSubmit").click(function(){
var val=$('input:radio[name="sex"]:checked').val();
if(val==null){
alert("什么也没选中!");
return false;
}
else{
alert(val);
}
})
</script>
</html>