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组件样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue fetch中的.then()的正确使用方法

    vue fetch中的.then()的正确使用方法

    这篇文章主要介绍了vue fetch中的.then()的正确使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • Vue中$refs的用法详解

    Vue中$refs的用法详解

    这篇文章主要介绍了Vue中$refs的用法,非常不错,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2018-06-06
  • 详解Vue项目的打包方式

    详解Vue项目的打包方式

    这篇文章主要为大家介绍了Vue项目的打包方式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-01-01
  • 一文带你搞懂Vue3中的各种ref的使用

    一文带你搞懂Vue3中的各种ref的使用

    在 Vue3 中,有许多与响应式相关的函数,例如 toRef、toRefs、isRef、unref 等等,本文将详细介绍这些函数的用法,让我们在实际开发中知道应该使用哪些 API 并能够熟练地回答面试官的相关问题
    2023-08-08
  • Vue+Element实现动态生成新表单并添加验证功能

    Vue+Element实现动态生成新表单并添加验证功能

    这篇文章主要介绍了Vue+Element实现动态生成新表单并添加验证功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • vue 如何实现表单校验

    vue 如何实现表单校验

    这篇文章主要介绍的是vue 如何实现表单校验的方法,又代码详细解说,感兴趣的小伙伴可以参考下面文章的具体内容
    2021-09-09
  • 关于vue表单提交防双/多击的例子

    关于vue表单提交防双/多击的例子

    今天小编就为大家分享一篇关于vue表单提交防双/多击的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • vue-devtools的安装和使用步骤详解

    vue-devtools的安装和使用步骤详解

    在本篇文章中小编给大家整理的是一篇关于vue-devtools安装使用的相关知识点内容,有需要的朋友们可以学习下。
    2019-10-10
  • Vue3配置vite.config.js解决跨域问题的方法

    Vue3配置vite.config.js解决跨域问题的方法

    跨域一般出现在开发阶段,由于线上环境前端代码被打包成了静态资源,因而不会出现跨域问题,这篇文章主要给大家介绍了关于Vue3配置vite.config.js解决跨域问题的相关资料,需要的朋友可以参考下
    2024-07-07
  • Vue实现下拉加载更多

    Vue实现下拉加载更多

    这篇文章主要为大家详细介绍了Vue实现下拉加载更多,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05

最新评论