.el-radio__inner { border-color: transparent; }样式不生效加deep
时间: 2024-01-22 07:17:29 浏览: 50
如果样式不生效,可以考虑使用 `deep` 选择器来穿透组件样式。例如:
```
::v-deep .el-radio__inner {
border-color: transparent;
}
```
这样就可以确保样式被应用到组件内部了。需要注意的是,`deep` 选择器可能会影响到其他组件,因此要谨慎使用。
相关问题
.hidden-circle .el-radio__inner { border-color: transparent; } .hidden-circle .el-radio__inner::after { display: none; }没生效
这段代码看起来是用于隐藏 Element UI 中的 radio 组件的圆形选中状态的。如果没有生效,可能有以下原因:
1. 没有正确引入 Element UI 样式文件。请确保在 HTML 文件中正确引入了 Element UI 样式文件,例如:
```html
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
```
2. 没有正确设置 radio 组件的 class。请确保给 radio 组件添加了 `hidden-circle` class,例如:
```html
<el-radio class="hidden-circle" v-model="radio" label="1">选项一</el-radio>
```
3. 其他样式覆盖了该段代码。请检查其他样式是否会影响到 radio 组件的样式,如果有,请调整样式的优先级或者修改其他样式。
如果以上方法都不行,请提供更多代码或者具体情况,我可以帮你更好地解决问题。
<el-radio-group v-model="staffInfo.sex"> <el-radio-button label="1">男</el-radio-button> <el-radio-button label="2">女</el-radio-button> </el-radio-group> 样式修改 ::v-deep.el-radio-button{ margin-right: 15px; border-radius:4px; .el-radio-button__inner {//修改按钮样式 width: 120px; height: 42px; background: #F7F8FA; color:#333; border: 0 !important; } .el-radio-button__orig-radio:checked + .el-radio-button__inner {// 修改按钮激活样式 color: #fff; background-color: #f63; border-color: #f63; box-shadow: -1px 0 0 0 #f63; } ———这个完整的代码应该怎样写
完整的代码应该如下所示:
```html
<template>
<el-radio-group v-model="staffInfo.sex">
<el-radio-button label="1">男</el-radio-button>
<el-radio-button label="2">女</el-radio-button>
</el-radio-group>
</template>
<style scoped>
::v-deep .el-radio-button {
margin-right: 15px;
border-radius: 4px;
}
::v-deep .el-radio-button__inner {
width: 120px;
height: 42px;
background: #f7f8fa;
color: #333;
border: 0 !important;
}
::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
color: #fff;
background-color: #f63;
border-color: #f63;
box-shadow: -1px 0 0 0 #f63;
}
</style>
```
注意,样式选择器中的 `::v-deep` 是用于穿透组件样式限制的,需要在样式选择器前加上 `scoped` 声明,以限定样式仅在当前组件内生效。
相关推荐
![deb](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_lunwen.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)