vue中el-input以及el-select组件，“ 获取焦点 ”时，怎么修改【背景样式，placeholder文字颜色】

置顶禾小毅

已于 2023-10-31 17:54:13 修改

阅读量8.5k

点赞数 6

文章标签：前端 vue.js html css

于 2021-07-26 18:29:35 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_50450473/article/details/119115486

版权

一、下图切换操作

html：

此处placeholder的文字颜色不易修改，先自定义2种不同文字颜色样式css：

/deep/ .colorchange .el-input__inner::-webkit-input-placeholder{

  color: #c7fbeb; // 初始化的文字颜色

}

/deep/ .searchchange .el-input__inner::-webkit-input-placeholder{

  color: #333; // 获取焦点时的文字颜色

}

js：

二、关于select 下option 样式修改

修改option需要在标签 el-select 上添加 :teleported="false"，才能修改的了

<el-select :teleported="false" style="width: 300px" v-model="person.weekActive" placeholder="请选择" @change="changeWeek" >
    <el-option v-for="item in person.weekList" :key="item.value" :label="item.label" :value="item.value+''" />
</el-select>

样式

// 选项样式
:deep(.el-popper) {
  &.is-light {
    background: #18191C !important;
    border: none;
  }
  .el-select-dropdown__item {
    color: #848484;
    &:hover {
      background-color: transparent !important;
      color: #00B386 !important;
    }
    &.hover {
      background-color: transparent !important;
      color: #00B386 !important;
    }
  }
  .el-select-dropdown__list .selected{
    color: #fff !important;
  }
  .el-popper__arrow {
    display: none;
  }
}

// 外框样式
:deep(.el-select) {
  .el-input {
    &.is-focus {
      .el-input__wrapper {
        box-shadow: 0 0 0 1px transparent inset !important;
      }
    }
  }
  .el-input__wrapper {
    box-shadow: 0 0 0 1px transparent inset;
    background-color: rgba(146, 146, 146, 0.08);

    &.is-focus {
      box-shadow: 0 0 0 1px transparent inset !important;
    }
  }
  .el-input__inner {
    color: #C2C8CC;
  }
}

希望我的愚见能够帮助你哦~，若有不对的地方，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~