vue2-elementUI部分组件样式修改方法

 更新时间:2023年12月12日 09:17:01   作者:小沐°  
这篇文章主要介绍了vue2-elementUI部分组件样式修改,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

el-radio样式:

/deep/ .el-radio__input .el-radio__inner {
  width: 20px;
  height: 20px;
  position: relative;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid #999;
  border-radius: 0;
  outline: none;
  transition: all 0.3s ease-in-out;
  box-sizing: border-box;
  cursor: pointer;
}
/* 选中后的字体颜色 */
/deep/ .el-radio__input.is-checked+.el-radio__label {
  color: #7e6934 !important;
}
/* 选中后圆圈的背景颜色 */
/deep/ .el-radio__input.is-checked .el-radio__inner {
  background: #7e6934 !important;
  border-color: #7e6934 !important;
}
// 选中后的样式
/deep/ .el-radio__input.is-checked .el-radio__inner::after {
  width: 20px;
  height: 20px;
  display: inline-block;
  visibility: visible;
  padding-left: 0;
  text-align: center;
  content: "✓";
  color: #fff;
  font-size: 10px;
  line-height: 20px;
  border-radius: 0;
  background-color: #88733c;
}

el-input:改变选中时的边框颜色

/deep/.el-input__inner:focus {
  border-color: #88733c
}

el-select:改变选中时的边框、文本颜色

// 选择框选中时的边框颜色
/deep/.el-select .el-input.is-focus .el-input__inner {
  border-color: #88733c !important;
}
//选择框选中又取消时的边框颜色
/deep/.el-select .el-input__inner:focus {
  border-color: #88733c !important;
}
// 选择框选中的文本颜色
.el-select-dropdown__item.selected {
  color: #88733c;
}

到此这篇关于vue2-elementUI部分组件样式修改的文章就介绍到这了,更多相关vue2 elementUI组件样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Element-UI控件Tree实现数据树形结构的方法

    Element-UI控件Tree实现数据树形结构的方法

    这篇文章主要介绍了Element-UI控件Tree实现数据树形结构,本期介绍添加、修改等功能也比较简单,可以通过element-ui的$prompt弹框控件来实现,需要的朋友可以参考下
    2024-01-01
  • vue 动态路由component 传递变量报错问题解决

    vue 动态路由component 传递变量报错问题解决

    这篇文章主要为大家介绍了vue 动态路由component 传递变量报错问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • Vue项目中封装axios的方法

    Vue项目中封装axios的方法

    这篇文章主要介绍了Vue项目中封装axios的方法,axios 是一个轻量的 HTTP客户端,基于 XMLHttpRequest 服务来执行 HTTP 请求,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-05-05
  • Element框架el-tab点击标签页时再渲染问题的解决

    Element框架el-tab点击标签页时再渲染问题的解决

    本文主要介绍了Element框架el-tab点击标签页时再渲染问题的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)

    vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘Combin

    这篇文章主要介绍了vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • 解决vue2中使用elementUi打包报错的问题

    解决vue2中使用elementUi打包报错的问题

    这篇文章主要介绍了解决vue2中使用elementUi打包报错的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • Vue的方法和属性案例详解

    Vue的方法和属性案例详解

    这篇文章主要介绍了Vue的方法和属性案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-07-07
  • vue+animation实现翻页动画

    vue+animation实现翻页动画

    这篇文章主要为大家详细介绍了vue+animation实现翻页动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • vue.js实现日历插件使用方法详解

    vue.js实现日历插件使用方法详解

    这篇文章主要为大家详细介绍了vue.js模拟日历插件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • Vue中引用JSON数据的方法小结

    Vue中引用JSON数据的方法小结

    在现代Web开发中,JSON是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成,Vue.js作为一个流行的前端框架,支持多种方式引入和处理JSON数据,本文将详细介绍几种在Vue中引用JSON数据的方法,需要的朋友可以参考下
    2024-10-10

最新评论