radio-group 按钮填充色
时间: 2023-07-08 22:46:09 浏览: 36
要设置 radio-group 按钮的填充色,可以使用 CSS 的 background-color 属性。以下是一个示例:
```css
.radio-group input[type="radio"] {
display: none;
}
.radio-group label {
display: inline-block;
margin-right: 10px;
padding: 5px 10px;
border: 1px solid #ccc;
border-radius: 3px;
cursor: pointer;
background-color: #fff; /* 设置按钮的默认填充色 */
}
.radio-group input[type="radio"]:checked + label {
background-color: #3f51b5; /* 设置选中按钮的填充色 */
color: #fff;
}
```
在这个示例中,我们将 label 标签的 background-color 属性设置为 #fff,这是按钮的默认填充色。然后,使用 CSS 伪类 :checked 来设置选中标签的填充色为 #3f51b5。注意,我们还设置了选中标签的颜色为 #fff,以使文本可读。
相关问题
el-radio-group 填充色和边框色
el-radio-group 的填充色和边框色属性是通过 fill 参数来设置的。默认情况下,fill 的值为 "#409EFF",即深蓝色。通过修改 fill 的值,可以改变按钮形式的 Radio 激活时的填充色和边框色。<em>1</em><em>2</em><em>3</em>
#### 引用[.reference_title]
- *1* *2* *3* [Element-Ui组件之Radio 单选框(点击和el-tabs点击)](https://blog.csdn.net/qq_36850813/article/details/81060126)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}} ] [.reference_item]
[ .reference_list ]
radio-group 按钮样式
radio-group 按钮样式可以通过 CSS 来自定义。以下是一个简单的示例:
HTML 代码:
```html
<div class="radio-group">
<input type="radio" id="radio1" name="radio" value="option1">
<label for="radio1">选项1</label>
<input type="radio" id="radio2" name="radio" value="option2">
<label for="radio2">选项2</label>
<input type="radio" id="radio3" name="radio" value="option3">
<label for="radio3">选项3</label>
</div>
```
CSS 代码:
```css
.radio-group input[type="radio"] {
display: none;
}
.radio-group label {
display: inline-block;
margin-right: 10px;
padding: 5px 10px;
border: 1px solid #ccc;
border-radius: 3px;
cursor: pointer;
}
.radio-group input[type="radio"]:checked + label {
background-color: #3f51b5;
color: #fff;
}
```
在这个示例中,我们将 radio 按钮的 display 属性设置为 none,然后使用 label 标签来代替按钮,并将它们设置为可点击的。我们还设置了标签的样式,包括边框、圆角、填充和光标样式。最后,我们使用 CSS 伪类 :checked 来设置选中标签的样式。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)