el-radio的勾选样式改成对勾
时间: 2023-11-08 08:14:09 浏览: 86
可以通过设置 `el-radio` 组件的 `checked-icon` 属性来将勾选样式改成对勾。示例代码如下:
```html
<template>
<el-radio
v-model="radio"
:label="3"
checked-icon="el-icon-circle-check"
>
Radio
</el-radio>
</template>
```
在上面的代码中,`checked-icon` 属性设置为 `el-icon-circle-check`,表示使用 element-ui 中的对勾图标。你也可以使用其他的图标库中的对勾图标。
相关问题
el-radio-group的勾选是圆形的,改成对勾形状
可以通过修改el-radio-group的样式来实现勾选为对勾形状。具体方法是:
1. 首先,在el-radio-group所在的组件或页面中,添加下面的CSS样式:
```css
.el-radio__inner::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
border-radius: 50%;
transform: translate(-50%, -50%) scale(0);
background-color: #409EFF;
transition: all .2s;
}
.el-radio__input.is-checked .el-radio__inner::after {
transform: translate(-50%, -50%) scale(1);
}
```
2. 上述样式中,`.el-radio__inner::after`是勾选的对勾样式,`.el-radio__input.is-checked .el-radio__inner::after`是选中状态下的样式。
3. 保存样式后,重新渲染页面,就会看到勾选变成了对勾形状。
注意:这种方式只是通过修改样式来实现勾选为对勾形状,不会影响el-radio-group的单选功能。
el-checkbox样式修改
根据引用,可以看到el-checkbox样式的修改主要包括以下几个方面:
1. 修改选中框的样式和文字点击不变颜色:可以通过修改背景颜色、边框颜色和文字颜色来实现。同时,可以通过调整选中框的大小和对勾的大小和位置来改变样式。
2. 修改选中框和文字的对齐:可以使用flex布局中的align-items属性来实现选中框和文字的垂直对齐。
3. 修改点击文字颜色不变:可以通过修改选中状态下文字的颜色来实现。
4. 修改选中框和文字对齐前后的样式:可以通过调整padding来实现选中框和文字对齐的效果。
根据引用,el-checkbox样式的修改可以参考样式灵感来源地址。如果有需要变更图标的,可以在上述代码中找到对应的位置进行修改。
综上所述,可以通过修改el-checkbox的相关样式来实现自定义的样式效果。<span class="em">1</span><span class="em">2</span>
#### 引用[.reference_title]
- *1* [element-ui中修改el-checkbox中的样式](https://blog.csdn.net/chuxuan0215/article/details/125405215)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [checkbox点击事件修改样式](https://download.csdn.net/download/weixin_38684328/14045472)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]