elementUI中的select下拉框多选显示的文本内容过长导致显示溢出框外的解决方案(已解决！！！) - 灰信网（软件开发博客聚合） 

.logMgCls .el-select__tags-text {
  display: inline-block;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.logMgCls .el-select .el-tag__close.el-icon-close {
  top: -7px;
}

/deep/ 深度选择器:vue组件中，在style设置为scoped的时候，里面在写样式对子组件是不生效的，如果想让某些样式对所以子组件都生效，这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作。 ( >>> 的别名)

VUE element-ui之页面全屏时el-select下拉菜单不显示问题解决 

:popper-append-to-body="false"  适用大屏下拉选择框在屏幕外面问题 
 
 <el-select
     v-model="value"
     placeholder="区域选择"
     :popper-append-to-body="false"  //加入此行代码，完美解决
>
 
假设位置错乱 修改css
 
 /deep/ .el-popper[x-placement^="bottom"] {
    top: initial !important;
  }
 
 
<style>
直接覆盖
.wrap .class1{
      font-size:12px;
  }
</style>

修改el-select样式 - xxx20210106 - 博客园

element el-select下拉框修改样式 el-select-dropdown - 程序员大本营

element 日期组件怎么更改placeholder的字体颜色？_浮生666的博客-CSDN博客

修改el-select样式

包裹的盒子父级的class，下以修改 el-select的样式为例 有一个popper-class属性
<div class="view-action-box">
<el-select
    popper-class="elselect"
    v-model="quarterValue"
    placeholder="请选择"
>
</el-select>
</div>
Vue 里面可以多个style标签
<style> <!--无scoped 直接覆盖-->
/*最外层背景*/
.elselect {
  background: #122856;
  color: #fff !important;
  border: 1px solid rgba(149, 190, 255, 0.32);
}
/*修改单个的选项的样式*/
.elselect .el-select-dropdown__item {
  color: #fff !important;
  font-size: 12px;
  text-align: center;
}
/*item选项的hover样式*/
.elselect .el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background-color: #0c1a546b;
}
.elselect .el-popper[x-placement^="bottom"] .popper__arrow::after {
  border-bottom-color: #04153d !important;
}
</style>
 
<style rel="stylesheet/css" lang="css" scoped><!--有scoped 加deep-->
/*修改el下拉样式*/
.view-action-box {
  display: inline-block;
  float: right;
}
.view-action-box /deep/ .el-input__inner {
  height: 20px;
  border: 1px solid rgba(149, 190, 255, 0.32);
  background-color: #05153c;
  color: #95beff;
  width: 105px;
  line-height: 20px;
  font-size: 13px;
}
/*修改总体选项的样式 最外层*/
.view-action-box/deep/ .el-select-dropdown{
    background-color: #08164d;
    margin: 0px;
    border:0px;
    border-radius: 0px;
  }
/*图标行高*/
.view-action-box /deep/ .el-input__icon {
  line-height: initial;
}
/*placeholder的样式 需要先选中父元素 增加权重*/
.view-action-box /deep/ input::-webkit-input-placeholder {
    color: #95beff;
  }
.view-action-box /deep/ input::-moz-input-placeholder {
    color: #95beff;
  }
.view-action-box /deep/ input::-ms-input-placeholder {
    color: #95beff;
  }
</style>

.hello{
  // 未选中任何选项的时候 placeholder的样式 需要先选中父元素 增加权重
  /deep/ input::-webkit-input-placeholder {
    color: #fff;
  }
  /deep/  input::-moz-input-placeholder {
    color: #fff;
  }
  /deep/  input::-ms-input-placeholder {
    color: #fff;
  }
 
  //修改的是el-input的样式 
  //一种方法是设置最里层el-input__inner的背景色 外层的两级父元素设置为透明色
  //另一种方法是从el-select到el-input__inenr的背景色都设置为需要的颜色
  /deep/ .el-select,
  /deep/ .el-input,
  /deep/ .el-input__inner{
    background-color:#08164D ;
    color:#fff;
    border:0px;
    border-radius:0px;
    text-align: center;
  }
 
  //el-input聚焦的时候 外层的border会有一个样式
  /deep/ .el-select .el-input.is-focus .el-input__inner{
    border:0px;
  }
 
  //修改的是el-input上下的小图标的颜色
  /deep/ .el-select .el-input .el-select__caret{
    color:#fff;
  }
 
  //修改总体选项的样式 最外层
  /deep/ .el-select-dropdown{
    background-color: #08164d;
    margin: 0px;
    border:0px;
    border-radius: 0px;
  }
 
  //修改单个的选项的样式
  /deep/ .el-select-dropdown__item{
    background-color: transparent;
    color:#fff;
  }
 
  //item选项的hover样式
  /deep/ .el-select-dropdown__item.hover, 
  /deep/ .el-select-dropdown__item:hover{
    color:#409eff;
  }
 
  //修改的是下拉框选项内容上方的尖角
  /deep/ .el-popper .popper__arrow, .el-popper .popper__arrow::after{
    display: none;
  }
} 

el-date-picker日期组件更改placeholder的字体颜色

/deep/ .el-input__inner,
/deep/ .el-date-editor .el-range-input {
  color: #fff;
  &::placeholder {
    color: #fff;
  }
 
  &::-webkit-input-placeholder {
    /* WebKit browsers 适配谷歌 */
    color: #fff;
  }
 
  &:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 适配火狐 */
    color: #fff;
  }
 
  &::-moz-placeholder {
    /* Mozilla Firefox 19+ 适配火狐 */
    color: #fff;
  }
 
  &:-ms-input-placeholder {
    /* Internet Explorer 10+  适配ie*/
    color: #fff;
  }
}

转自：blog.csdn.net/a772116804/…