vue3-elementPlus部分组件样式修改

小沐°2024-01-25 17:35

前提：在less语言下使用/deep/；在sass语言下使用 ::v-deep 替换 /deep/

但::v-deep的写法已经废弃，建议使用:deep(css选择器)

elementUI样式修改：vue2-elementUI部分组件样式修改_vue2 圆圈选中样式-CSDN博客

复制代码

//下拉框中文字颜色
:deep(.el-dropdown-menu__item:not(.is-disabled):focus)  {
  background-color: #f5f5f5;
  color: #A88D5B;
}
//去除下拉框边框
:deep(.el-tooltip__trigger:focus-visible) {
  outline: unset;
}

el-input

复制代码

//改变输入框选中时边框颜色
.el-input {
  --el-input-focus-border-color: #88733c;
}

el-select

复制代码

//选中时下拉框边框颜色
:deep(.el-select__wrapper.is-focused){
  box-shadow: 0 0 0 1px #88733c inset !important;
}

el-tabs

复制代码

//标签页选中时文字颜色
:deep(.el-tabs__item.is-active) {
  color: #a88d5b !important;
}
//标签页鼠标悬浮时文字颜色
:deep(.el-tabs__item:hover)  {
  color: #a88d5b !important; //悬浮
}

el-radio

复制代码

//单选框颜色
:deep(.el-radio__input.is-checked + .el-radio__label) {
  color: #88733c !important;
}
:deep(.el-radio__input.is-checked .el-radio__inner) {
  background: #88733c !important;
  border-color: #88733c !important;
}