修改element UI el-table背景颜色样式 input select date vuetree

html 复制代码
::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  background: rgba(185, 215, 254, 0.07);
}

/*滚动态通用*/
::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 10px;
}

::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  width: 6px;
  margin: 0 auto;
  border-radius: 10px;
  background: #57657c;
}

// 设置height fixed 两条滚动条相交右下角的小方块
::-webkit-scrollbar-corner {
  background: rgba(0, 0, 0, 0);
}
.el-table__fixed-right-patch {
  background: #000;
  border-bottom: none;
}
/* 去除表格背景颜色 */
.el-table {
  background-color: transparent !important;
  color: #fff;
  overflow: hidden;
  position: relative;
}

/* 去除表格行的背景颜色 */
.el-table__body-wrapper .el-table__row {
  background-color: transparent !important;
}

/* 去除表头背景颜色1 */
.el-table__header-wrapper,
.el-table th {
  background-color: transparent !important;
  color: #fff;
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(5, 105, 254, 0.5), rgba(255, 255, 255, 0)) 1 1;
}
/* 去除表头背景颜色2 */
.el-table tr {
  background: rgba(185, 215, 254, 0.1);
}

.el-table .el-table__fixed,
.el-table .el-table__fixed-right {
  background-color: #000 !important;
}

/* 表格头部字体颜色*/
.el-table th>.cell {
  color: #fff;
}

.el-table th.is-leaf,
.el-table td,
.el-table--group,
.el-table--border {
  border: none;
}

.el-table::before {
  background-color: #161e33 !important;
}
// 鼠标滑过背景色 
.el-table__fixed::before,
.el-table__fixed-right::before,
.el-table::before,
.el-table--border::after,
.el-table--group::after {
  background: none !important;

}

// 鼠标滑过列表背景颜色
.el-table__body tr.hover-row>td,
.el-table__body tr.hover-row.current-row>td,
.el-table__body tr.hover-row.el-table__row--striped>td,
.el-table__body tr.hover-row.el-table__row--striped.current-row>td,
.el-table--enable-row-hover .el-table__body tr:hover>td {
  background: rgba(61, 85, 125, 0.9) !important;
  cursor: pointer;
}

// table 斑马纹
.el-table--striped .el-table__body tr.el-table__row--striped td {
  background: rgba(185, 215, 254, 0.07);
}
.el-pagination {
  text-align: right;
}

.el-pagination__total {
  color: #fff;
}

.el-pagination__sizes .el-input .el-input__inner {
  border: 1px solid #6381BF;
  color: #fff;
  background: rgba(99, 129, 191, 0.27);
}

.el-pagination.is-background .btn-prev,
.el-pagination.is-background .btn-next,
.el-pagination.is-background .el-pager li {
  background: none;
  color: #fff;
}

.el-pagination.is-background .el-pager li:not(.disabled).active {
  border: 1px solid #6381BF;
  color: #fff;
  background: rgba(99, 129, 191, 0.27);
  border-radius: 6px;
}

.el-pagination span:not([class*=suffix]),
.el-pagination button {
  color: #fff;
}

.el-pagination__editor.el-input .el-input__inner {
  border: 1px solid #6381BF;
  color: #fff;
  background: rgba(99, 129, 191, 0.27);
}

.el-pagination button:disabled,
.el-pager li,
.el-pagination .btn-prev,
.el-pagination .btn-next {
  background: none;
  color: #fff;
}
.el-input--small {
  border-radius: 2px;
  border: none
}

.el-dropdown-menu {
  background: #3e5177;
  border: none;
  color: #fff;
}

.el-dropdown-menu__item:not(.is-disabled):hover,
.el-dropdown-menu__item:focus {
  background: #3e5177;
  border: none;
  color: #fff;
  font-weight: bold;
}

.el-dropdown-menu__item--divided:before {
  background: #3e5177;
}

.el-dropdown-menu__item--divided {
  border-top: none;
}

.el-input__inner {
  background: rgba(99, 129, 191, 0.36);
  border: none;
  color: #fff;
}

.el-date-editor .el-range-input {
  background: none;
  color: #fff;
}

.el-date-editor .el-range-separator {
  color: rgba(255, 255, 255, 0.7)
}

// select
.el-select-dropdown {
  background: #3e5177;
  border: 1px solid #6381BF;
}

// 表格小三角
.el-select-dropdown__item,
.el-table__expand-icon,
.el-form-item__label,
.el-date-picker__header-label,
.el-date-table th,
.el-picker-panel__icon-btn,
.el-radio,
.el-time-spinner__item,
.el-time-spinner__item.active:not(.disabled),
.el-time-panel__btn,
.el-message-box__content,
.el-message-box__title,
.el-dialog__title,
.el-dialog__body,
.el-month-table td .cell,
.el-table__empty-text,
.el-select-dropdown__empty,
.el-upload-dragger .el-upload__text,
.el-dropdown-menu__item,
.el-dialog__headerbtn .el-dialog__close,
.el-dialog__headerbtn:focus .el-dialog__close,
.el-dialog__headerbtn:hover .el-dialog__close,
.el-picker-panel__shortcut {
  color: #fff;
}

.el-select-dropdown__item.selected {
  background-color: #3e5177;
  color: #fff;
}

.el-select-dropdown__item.hover,
.el-selectdropdown__item:hover {
  background-color: #3e5177;
  font-weight: bold;
  font-size: 16px;
}


//table
.el-table__expanded-cell {
  background: none;
}

// table 切换分页 loading
.el-loading-mask {
  background-color: rgba(0, 0, 0, 0.3);
}

.el-collapse-item__header,
.el-collapse-item__wrap {
  background: none;
}

.el-textarea__inner,
.el-textarea.is-disabled .el-textarea__inner,
.el-input.is-disabled .el-input__inner,
.el-radio__input.is-disabled.is-checked .el-radio__inner::after,
.el-picker-panel__footer {
  background: rgba(99, 129, 191, 0.36);
  border-radius: 2px;
  border: none;
  color: #fff;
}

.el-picker-panel,
.el-time-panel,
.el-time-panel__footer {
  background: #3e5177;
  border-radius: 2px;
  border: none;
  color: #fff;
}

.el-collapse {
  border-top: none;
  border-bottom: none;
}

.el-collapse-item__wrap {
  border-bottom: none;
}

.el-picker-panel *[slot=sidebar],
.el-picker-panel__sidebar {
  background: #3e5177;
  border-right: 1px solid #6381bf;
}

.el-date-table td.in-range div,
.el-date-table td.in-range div:hover {
  background-color: #6381BF;
}

.el-date-picker__time-header {
  border-bottom: 1px solid #6381bf;
}

.el-time-spinner__item:hover:not(.disabled):not(.active) {
  background: #3e5177;
  font-weight: 800;
}

.el-message-box {
  background-color: #1e2c4c;
  border: none;
}

// table 斑马纹
.el-table--striped .el-table__body tr.el-table__row--striped td {
  background: rgba(185, 215, 254, 0.07);
}

.el-date-range-picker__content.is-left {
  border-right: 1px solid #6381bf;
}

.el-date-range-picker__time-header,
.el-date-table th {
  border-bottom: 1px solid #6381bf;
}

.el-drawer {
  background: url("../image/drawer_bg.png") no-repeat center / 100% 100%;
}

.el-dialog,
.window,
.el-image__error,
.el-image__placeholder,
.el-image__error {
  background-color: rgba(47, 64, 99, 0.6);
  backdrop-filter: blur(8px);

}

.el-dialog__header {
  padding: 10px;
  background: url("../image/drawer_titlebg.png") no-repeat center / 100% 100%;
}

.el-tooltip__popper.is-dark {
  background: #394970;
}

// vuetree 外面的input
.vue-treeselect__control {
  background: #3e5177 !important;
  color: #fff !important;
  border: none !important;
}

// vuetree 外面的input框内
.vue-treeselect__single-value {
  color: #fff !important;
}

//  vuetree 外面的input框内 鼠标滑过clear x的颜色
.vue-treeselect__x-container:hover {
  color: #fff !important;
}

// vuetree input划过的颜色
.vue-treeselect__option:hover {
  /* 自定义选中背景颜色 */
  color: #fff;
  /* 自定义选中文本颜色 */
  font-size: 16px;
}

// vuetree tree
.vue-treeselect__menu {
  background: #415274 !important;
  border: 1px solid #7A9AD9 !important;
}

// vuetree tree 里面每一项数据的背景色
.vue-treeselect__option:first-of-type {
  background-color: #3e5177 !important;
}

.el-tree {
  background: none;
  color: #fff;
}

.el-tree-node__content:hover,
.el-tree-node:focus>.el-tree-node__content {
  background: none;
}

// .el-tree-node__content:hover {
//   background-color: #f00;
// }

.el-upload-dragger {
  background-color: #37486c;
  border: 1px dashed #37486c;
}

.reset,
.el-button:hover,
.el-button:focus,
.el-button.is-disabled.is-plain,
.el-button.is-disabled.is-plain:hover,
.el-button.is-disabled.is-plain:focus {
  border: 1px solid #3B72E3;
  background: #3B72E3;
  color: #fff;
}

.el-button--text {
  padding: 7px 15px;
}

// 弹窗 关闭按钮
.el-dialog__headerbtn {
  height: 18px;
  width: 18px;
  top: 14px;
  background: #6882ba;
  font-size: 16px;
  border-radius: 4px;
}