el-switch inactive-text 颜色修改
时间: 2024-09-19 17:07:47 浏览: 50
解决vant title-active-color与title-inactive-color不生效问题
el-switch 是 Element UI 中的一个组件,它是一个简单的开关按钮,常用于两状态的选择。`inactive-text` 属性是指当开关处于未激活状态(即默认状态或用户尚未交互的状态)时,文本标签的文字内容。如果你想修改这个状态下文字的颜色,你可以直接设置 `inactive-text-color` 或者通过 CSS 类名来定制样式。
例如,在 HTML 上,你可能会这样做:
```html
<el-switch v-model="switchValue" inactive-text-color="#ff0000"> <!-- 设置为红色 -->
<span slot="handle"></span>
</el-switch>
```
或者在 CSS 中:
```css
.el-switch__text {
color: #ff0000; /* 设置未激活状态下的颜色 */
}
```
记得将 `#ff0000` 替换为你想要的实际颜色值。如果你需要全局更改所有 `el-switch` 的 inactive-text 颜色,可以在 Element UI 的主题配置中调整。
阅读全文