Html单选按钮自定义

最新推荐文章于 2024-05-24 18:59:06 发布

zhifeng687

最新推荐文章于 2024-05-24 18:59:06 发布

阅读量2.9k

点赞数

本文链接：https://blog.csdn.net/qq_26222859/article/details/51154322

版权

前端专栏收录该内容

82 篇文章 0 订阅

订阅专栏

html的单选按钮没有提供一个样式能修改其圆圈

所以我们不再使用<input type="radio"/>标签

我们可以使用label标签，通过以下原理实现单选按钮：

（A）label标签可以加背景，并通过其他样式，让背景显示在文字的左边;

（B）点击label后，可以通过JS，修改其背景图片;

（此处为图片）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Html单选按钮自定义</title>
<style>
.radio_label{
				background: url(../images/tabIcon.png) no-repeat;
				background-position: left -67px;
				display: inline-block;
                height: 12px;
                padding-left:12px;
                white-space: nowrap;            
                line-height:12px;
			}
.checked {
				background-position: left -99px;  /* 图片使用图片精灵合并了，通过改变background-position使用不同的图片 */
}	
</style>
</head>
<body>
<div>
          <span >对比：</span>
          <label value="0"  class="radio_label checked"> 上月</label>
		 <label value="1"  class="radio_label"> 上季</label>                               
</div>
<script src="../js/jquery.js"></script>
<script>
$(".radio_label").click(function(){
	$(this).siblings().removeClass("checked");
	$(this).addClass("checked");
});
</script>
</body>
</html>

参考：Html单选按钮自定义样式

zhifeng687

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Html单选按钮自定义

html的单选按钮没有提供一个样式能修改其圆圈所以我们不再使用<input type="radio"/>标签我们可以使用label标签，通过以下原理实现单选按钮：（A）label标签可以加背景，并通过其他样式，让背景显示在文字的左边;（B）点击label后，可以通过JS，修改其背景图片;
复制链接

扫一扫