单选按钮组，自定义单选按钮样式，HTML/Vue代码在线实时编辑、预览

HTML

格式化

支持Emmet，输入 p 后按 Tab键试试吧！

<head> ...

展开

</head>

<body>

            
                1
2
3
4
5
6
7
8
9
10
11

            
            <h3>单选按钮组</h3>
<p>点击任意一个进行切换</p>

<div class="btn-group">
  <input type="radio" id="r1" name="r-group" checked>
  <label for="r1">左</label>
  <input type="radio" id="r2" name="r-group">
  <label for="r2">中</label>
  <input type="radio" id="r3" name="r-group">
  <label for="r3">右</label>
</div>

编辑器加载中

</body>

SCSS

格式化

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

            
            /* 隐藏 单选框 */
.btn-group input{
  display: none;
}

/* 自定义按钮样式 */
.btn-group label {
  color: #fff;
  background: #5c7ada;
  padding: 10px 30px;
  border-radius: 6px;
}

/* 选中后的样式 */
.btn-group input:checked + label {
  background-color: #b8606c;
}

body{
  text-align: center;
}

编辑器加载中

格式化

编辑器加载中

预览

控制台