版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Tomhs3000/article/details/79045746
一、基于默认的input[radio]标签很丑,很多时候都需要重写样式,下面就介绍下通过label标签重置input[radio]标签的方法;
二、准备首先我们需要给lable标签绑定input,然后再通过一个标签包含说明文字(这里选用span标签),代码如下
<div class="wrap">
<input type="radio" id="option1" name="mode" value = "0" class="option-radio" checked />
<label id="firstLabel" for="option1"><span class="">这是一行优雅的代码</span> </label>
<input type="radio" id="option2" name="mode" value = "1" class="option-radio" />
<label for="option2"><span class="">这是一行特别优雅的代码</span></label>
</div>
三、接下来要在样式上做文章了,先把input的原样式隐藏,然后给label标签用背景图代替原有样式。这里需要注意的是display的设置,因为label本身是行内元素,如果需要选项在一行设置inline-block,需要换行则设置block。否则无法给label设置宽高,点击文字时候将没法触发label。样式如下
.option-radio{
display: none;
}
.option-radio+label{
margin-top: 20px;
display: block;
height: 20px;
width: 200px;
text-indent: 23px;
background: url("nocheacked.png") no-repeat left center;
cursor: pointer;
}
.option-radio:checked+label{
background: url("cheacked.png") no-repeat left center;
}
#firstLabel{
width: 170px;
}
.wrap{
margin:15px;
}
四、效果图
五、完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>改变单选样式</title>
</head>
<style>
.option-radio{
display: none;
}
.option-radio+label{
margin-top: 20px;
display: block;
height: 20px;
width: 200px;
text-indent: 23px;
background: url("nocheacked.png") no-repeat left center;
cursor: pointer;
}
.option-radio:checked+label{
background: url("cheacked.png") no-repeat left center;
}
#firstLabel{
width: 170px;
}
.wrap{
margin:15px;
}
</style>
<body>
<div class="wrap">
<input type="radio" id="option1" name="mode" value = "0" class="option-radio" checked />
<label id="firstLabel" for="option1"><span class="">这是一行优雅的文字</span> </label>
<input type="radio" id="option2" name="mode" value = "1" class="option-radio" />
<label for="option2"><span class="">这是一行特别优雅的文字</span></label>
</div>
</body>
</html>
扫描二维码关注公众号,回复:
3798338 查看本文章