css 点击按钮，切换颜色

最新推荐文章于 2025-07-22 15:19:30 发布

勇气大爆炸

最新推荐文章于 2025-07-22 15:19:30 发布

阅读量1.1k

点赞数 3

CC 4.0 BY-SA版权

文章标签：前端

本文链接：https://blog.csdn.net/qq_38260470/article/details/138523759

<div class="button-group">
		  <input type="radio" id="button1" name="button" checked onclick="dianji(1)">
		  <label for="button1">全部</label>
		 
		  <input type="radio" id="button2" name="button" onclick="dianji(2)">
		  <label for="button2">第一部分</label>
		 
		  <input type="radio" id="button3" name="button" onclick="dianji(3)">
		  <label for="button3">第二部分</label>
		</div>
<style>
		.button-group {
		  display: flex;
		  gap: 8px; /* 可以根据需要调整间隔 */
		}
		 
		.button-group input[type="radio"] {
		  display: none; /* 隐藏默认的Radio样式 */
		}
		 
		.button-group label {
		  padding: 8px 16px;
		  border: 1px solid #ccc; /* 默认边框样式 */
		  cursor: pointer;
		  user-select: none;
		  border-radius: 3px;
		}
		 
		.button-group input[type="radio"]:checked + label {
		  background-color: #fff; /* 选中时的背景颜色 */
		  color: #0D8EFF; /* 选中时的文本颜色 */
		  border-color: #0D8EFF; /* 选中时的边框颜色 */
		}
	</style>