修改element-ui默认的开关样式

参考https://blog.csdn.net/WwangXue/article/details/90038947

默认样式：

修改为：

CSS代码：

.el-switch__core{
height: 20px !important;
line-height: 20px !important;
width: 46px !important;
}
.el-switch__label--left{
position: relative;
left: 46px;
color: #fff;
z-index: -1111;
}
.el-switch__label--right{
position: relative;
right: 46px;
color: #fff;
z-index: -1111;
}
.el-switch__label--right.is-active{
z-index: 1111;
color: #fff !important;
}
.el-switch__label--left.is-active{
z-index: 1111;
color: #fff !important;
}
.el-switch__core:after{
top: 2px;
}

页面：

<el-switch class="exio-switch" active-text="开" inactive-text="关" active-color="#13ce66"></el-switch>

修改element-ui默认的开关样式相关推荐

修改element ui的导航菜单样式，包括下拉菜单
第一次使用element ui,根据项目需求,选择了NavMenu导航菜单, Element - The world's most popular Vue UI framework 首先将代码复制粘贴 ...
Element UI 在父类设置样式不起作用
Element UI 在父类设置样式不起作用!!!应该有人遇到这样子的问题了如上图,想改变"修改"按钮的样式,但是发现 (1)直接修改样式不起作用, (2)给"修改元素 ...
Element ui 中将switch开关自定义文字描述(ON/OFF)显示在开关里面
Element ui 中将switch开关自定义文字描述(ON/OFF)显示在开关里面官网示例可以看出文字描述在开关两边,看着很别扭. 上代码 <el-switchv-model=" ...
element ui table show-overflow-tooltip自定义样式
element ui table show-overflow-tooltip自定义样式在使用element ui table 组件时,表格td内容太多可设置show-overflow-tooltip ...
Web前端笔记-修改element ui中表格样式（透明、去横纵线等含修改思路）
官方效果是这样的: 此处改成了这样的效果: 此处是可以进行滑动的,就是去除了滑动条,仍能滑动的效果. 下面说下修改样式,找到使用el-table的vue组建: 在style中贴上: <style ...
修改element ui中form表单的 label 颜色样式
此时,emement ui的form表单的label(年龄二字)是黑色的. 原代码: <template><el-form :model="numberValidateFo ...
修改element ui tree 搜索功能，实现分级搜索，关键字高亮
element ui 里面的tree 自带的搜索功能是默认搜索的全部数据,有关键字的显示,没有的不显示需求: 在element UI tree 原有功能不变的情况下新加 1)搜索 tree 时,如果 ...
element ui——Pagination 自定义分页样式
我们可以看到,element ui Pagination分页默认样式直接显示首页 - 中间页 - 末页,但当项目中数据量过大时,用户直接点击最后一页可能会导致后端elk崩溃.项目最后要求不能把 ...
修改naive ui默认样式，css变量值修改
新项目开发使用了naive ui组件库,使用组件时涉及到css样式修改,可以直接在组件父容器上使用组件内自带的css变量,组件会自动继承父容器的css变量值,不会影响其他页面使用: 示例:一个注册表单 ...

修改element-ui默认的开关样式

修改element-ui默认的开关样式相关推荐

最新文章

热门文章