vue3-elementPlus部分组件样式修改_vue3 修改element plus 样式

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

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

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

 el-dropdown

//下拉框中文字颜色
: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-tab-pane {
  height: calc(100vh - 380px);
}

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;
}

el-date-picker

//时间选择某一天选中时边框颜色
:deep(.el-input__wrapper.is-focus){
  box-shadow: 0 0 0 1px #88733c inset !important;
}
 
//时间选择一段时间选中时边框颜色
:deep(.el-range-editor.is-active) {
  box-shadow: 0 0 0 1px #88733c inset !important;
}

因el-date-picker 是将下拉框直接挂载到页面的中，而非自身元素下；若想要修改日期下拉框里的内容样式，需要在组件上设置是否将 date-picker 的下拉列表插入至 body 元素

:teleported="false"

          <el-date-picker
            v-model="data1"
            type="date"
            placeholder="请选择数据日期"
            :size="size"
            :teleported="false"
          />

选择某一天的时间选择框样式 ：

 

//当天日期颜色
:deep(.el-date-table td.today .el-date-table-cell__text) {
  color: #88733c !important;
}
 
//选中的日期颜色
:deep(.el-date-table td.current:not(.disabled) .el-date-table-cell__text) {
  background-color: #88733c !important;
}
 
//鼠标悬浮经过日期时颜色
:deep(.el-date-table td:hover){
  color: #88733c !important;
}
 
//上方中间文本鼠标悬浮时颜色
:deep(.el-date-picker__header-label:hover){
  color: #88733c !important;
}
 
//当前年份的颜色
:deep(.el-year-table td.today .cell) {
  color: #88733c !important;
}
 
//选中年份的颜色
:deep(.el-year-table td.current:not(.disabled) .cell) {
  color: #88733c !important;
}
 
//鼠标悬浮经过年份时颜色
:deep(.el-year-table td .cell:hover){
  color: #88733c !important;
}
 
//当前月份的颜色
:deep(.el-month-table td.today .cell) {
  color: #88733c !important;
}
 
//选中月份的颜色
:deep(.el-month-table td.current:not(.disabled) .cell) {
  color: #88733c !important;
}
 
//鼠标悬浮经过月份时颜色
:deep(.el-month-table td .cell:hover){
  color: #88733c !important;
}
 
//上方左右跳转按钮悬浮时颜色调整
:deep(.el-picker-panel__icon-btn:hover){
  color: #88733c !important;
}

 选择某一段时间的时间选择框样式 ：

//一段时间的开始日期背景颜色
:deep(.el-date-table td.start-date .el-date-table-cell__text) {
  background-color: #88733c !important;
  color: #fff !important;
}
 
//一段时间的结束日期背景颜色
:deep(.el-date-table td.end-date .el-date-table-cell__text) {
  background-color: #88733c !important;
  color: #fff !important;
}
 
//中间时间段背景颜色
:deep(.el-date-table td.in-range .el-date-table-cell) {
  background-color: #e3ddd0 !important;
}

el-table

//表格中选择框背景色
:deep(.el-checkbox) {
  --el-checkbox-checked-bg-color: #a88d5b;
}
 
//表格中选择框鼠标悬浮时颜色
:deep(.el-checkbox__input .el-checkbox__inner:hover) {
  border-color: #a88d5b !important;
}
 
//表格中选择框选中时颜色
:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  border-color: #a88d5b;
}