自定义 el-select 和 el-input 样式

需求

自定义 选择框的下拉框的样式和输入框

分析

1. el-select 样式

1.1 摘抄自网上的需要 deep 深度更改样式

.select_box{
  // 默认placeholder
  :deep .el-input__inner::placeholder {
    font-size: 14px;
    font-weight: 500;
    color: #3E534F;
  }
  // 默认框状态样式更改
  :deep .el-input__wrapper {
    height: 42px;
    background-color: rgba(0,0,0,0)!important;
    box-shadow: 0 0 0 1px #204C42 inset!important;
    --el-select-focus-border-color:#5AC087!important;
    --el-select-hover-border-color: #5AC087!important;
  }
  // 修改下拉框样式-点击框focus
  :deep .is-focus .el-input__wrapper {
    box-shadow: 0 0 0 1px #5AC087 inset!important;
    --el-select-focus-border-color:#5AC087!important;
    --el-select-hover-border-color: #5AC087!important;
  }
  :deep .el-select__caret {
    color:#5AC087!important;  // 清除按钮
  }
  :deep .el-input__inner {
    color: #5AC087!important; // 选中字体色
  }
}

// 下拉框-展开样式
.el-select-dropdown__item.selected {
  // background-color: #83e818!important; // 选中
}
.el-select-dropdown__item.hover {
  background-color: #498f6c!important; // hover
}
:deep .el-dropdown-menu__item:not(.is-disabled) {
  // color: #182F23!important; // disabled
}
.el-select-dropdown__item {
  color: #4FC78A !important; // 下拉项颜色
}
:deep .el-popper{
  background-color: #121f1b!important; // 展开下拉背景
  border: 1px solid #498f6c!important; // 展开下拉边框
}
:deep .el-popper .el-popper__arrow::before{
  border-top: 1px solid #498f6c!important; // 箭头按钮边框
  background-color: #121f1b!important; // 箭头按钮背景色
}

1.2 自己做的

• html

<div class="select-content-1">
      <ul class="content1" style="list-style: none; padding: 0px">
        <li :class="['select-item-1', 'wf7']">
          <span
            >xxxxxxxxxxxxx信息管理系统<icon-down
              :style="{
                color: '#fff',
              }"
            />
          </span>
          <ul class="select-item-2">
            <li>
              <span class="link"> xxxxxxxxxxxxx信息管理系统 </span>
            </li>
          </ul>
        </li>
      </ul>
    </div>

• css

<style scoped lang="less">
.select-content-1 {
  width: 100%;
  position: relative;
  z-index: 9;
}
.content1 {
  width: 96%;
  margin: 0 auto;
  margin-top: 15px;
  line-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: zihun5hao-wuwairunheiti, zihun5hao;
  font-weight: normal;
  color: #ffffff;
  letter-spacing: 1px;
  height: 35px;

  a {
    font-size: 18px;
    display: inline-block;
    height: 100%;
    width: 100%;
    text-decoration: none;
  }
  a:link {
    color: #fff;
    text-decoration: none;
  } //未访问：蓝色、无下划线
  a:active {
    color: #fff;
  } //激活：红色
  a:visited {
    color: #fff;
    text-decoration: none;
  } //已访问：紫色、无下划线
  a:hover {
    color: #fff;
  } //鼠标移近：红色、下划线
  li {
    list-style-type: none;
    cursor: pointer;
  }

  > div {
    display: flex;
  }

  .wf7 {
    .select-item-2 {
      padding-left: 0;
      width: 280px;
    }
  }

  .select-item-1 {
    line-height: 35px;
    height: 100%;
    position: relative;
    text-align: center;

    .el-icon-caret-bottom {
      transition: 0.2s;
      transform: rotateZ(180deg);
      position: relative;
      top: 3px;
    }
    &:hover {
      .select-item-2 {
        display: block;
      }
      .el-icon-caret-top {
      }
      .el-icon-caret-bottom {
        top: 0px;
        transform: rotateZ(0deg);
      }
    }
  }
  .select-item-2 {
    display: none;
    position: absolute;
    z-index: 999999;
    background: rgba(9, 109, 217, 0.6);
    box-shadow: inset 0px 0px 8px 0px #287ddc;
    border-radius: 8px;
    border: 2px solid #4dabff;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    color: #deeafd;
    padding-left: 0;
    margin-top: 2px;

    > li {
      height: 36px;
      line-height: 36px;
      &:hover {
        color: white;
      }
    }
    .item2-child-active {
      background-color: #4dacff7a;
      color: white;
    }
  }
  .wf7 {
    width: 280px;
    background: url('@/assets/images/dashboard/select.png') no-repeat;
    background-size: 100% 100%;
    color: #ffffff;
  }
}

2. el-input 样式

<el-input clearable v-model="name" placeholder="请输入" class="input-with-select input_box" style="width: 148px;margin: 0 40px;position: absolute;right:67px;" />

.input_box{
  // 默认状态样式更改
  height: 42px;
  --el-input-bg-color:rgba(0,0,0,0)!important;
  --el-input-border-color:#204C42!important;
  --el-input-focus-border-color:#5AC087!important;
  --el-input-hover-border-color: #5AC087!important;

  /* 只更改具有.el-input类名的元素的占位符文本样式 */
  :deep .el-input__inner::placeholder {
    font-size: 14px;
    font-weight: 500;
    color: #3E534F;
  }
  // 清除按钮
  :deep .el-input__clear {
    color: #5AC087!important;
  }
  :deep .el-input__inner {
    color: #5AC087!important; // 字体色
  }

}

3. el-table 样式

<el-table :data="tableData"
  style="width: 99.97%;--el-table-border-color: none;border-right: 1px #143275 solid;border-left: 1px #143275 solid;border-bottom: 1px #143275 solid;"
  :highlight-current-row="false"
  :header-cell-style="{ backgroundColor: '#143275', color: '#ffffff', fontSize: '14px', textAlign: 'center', borderLeft: '0.5px #154480 solid', borderBottom: '1px #154480 solid' }"
  :cell-style="{ color: '#fff', fontSize: '14px', textAlign: 'center', borderBottom: '0.5px #143275 solid', borderLeft: '0.5px #143275 solid' }"
  :row-style="{ color: '#fff', fontSize: '14px', textAlign: 'center', }" :row-class-name="tableRowClassName"
  empty-text="暂无数据" max-height="818">
  <el-table-column prop="date" label="项目编号" />
  <el-table-column prop="name" label="项目名称" />
  <el-table-column prop="state" label="项目交期" />
  <el-table-column prop="city" label="机型" />
  <el-table-column prop="city" label="数量" />
  //合并列
  <el-table-column label="生产进度">
    <el-table-column prop="zip" label="焊接" />
    <el-table-column prop="zip" label="喷镀" />
  </el-table-column>
</el-table>

/*  
// 表格部分样式
 // 最外层透明 */
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
  background-color: transparent;
  color: #93dcfe;
  font-size: 24px;
}
 
/* 表格内背景颜色  */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  background-color: transparent;
  border: 0px;
  color: #93dcfe;
  font-size: 24px;
  height: 5px;
  font-family: Source Han Sans CN Normal, Source Han Sans CN Normal-Normal;
  font-weight: Normal;
}
 
/* // 去掉最下面的那一条线  */
.el-table::before {
  height: 0px;
}
 
/* // 设置表格行高度 */
::v-deep .el-table__body tr,
::v-deep .el-table__body td {
  padding: 0;
  height: 54px;
}
 
/* // 修改高亮当前行颜色 */
::v-deep .el-table tbody tr:hover>td {
  background: #063570 !important;
}
 
/* // 取消当前行高亮 */
::v-deep .el-table tbody tr {
  pointer-events: none;
}
 
/* 修改表头样式-加边框 */
/* ::v-deep .el-table__header-wrapper {
  border: solid 1px #04c2ed;
} */
 
/* // 表格斑马自定义颜色 */
::v-deep .el-table__row.warning-row {
  background: #01205A;
}
 
 
/* 去掉表格里的padding */
::v-deep .el-table .cell,
.el-table th div {
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
}