vue el-input输入框el-autocomplete下拉列表样式修改

一、自定义样式，最终效果如下图

 常规修改样式代码如下，输入框样式已修改；

/deep/.el-input__inner:focus {
    border: 1px solid #1fb1ef;
  }
  /deep/.el-input__inner {
    border: 1px solid #1fb1ef;
    background: rgba(0, 80, 111, 0.8);
    border-radius: 18px;
    height: 30px;
    color: white;
    line-height: 30px;
    // background: #ffffff3b;
  }
  /deep/.el-input__icon {
    line-height: 30px;
    border-radius: 0 18px 18px 0;
    cursor: pointer;
  }
  /deep/.el-input__suffix {
    background: #1fb1ef;
    right: 1px;
    padding: 0 5px;
    border-radius: 0 18px 18px 0;
    opacity: 0.8;
    color: #fff;
  }

  

点击输入框弹出的下拉列表样式修改无效；解决方法请往下看

  /deep/ .el-autocomplete-suggestion {
    margin-top: 8px;
    border-radius: 6px;
    border: 1px solid #198ec0;
    background: rgba(0, 80, 111, 0.6);
    color: rgba(25, 142, 192,1);
    
    .popper__arrow{
      top: -8px;
      border-bottom-color: rgba(31, 177, 239, 1);
    }
    .popper__arrow::after{
      border-bottom-color: rgba(0, 80, 111, 0.9);
    }
    .el-autocomplete-suggestion__wrap{
      padding: 2px;
    }
  }

  /deep/ .el-autocomplete-suggestion li{
    color: #ffffff;
  }
    
  /deep/ .el-autocomplete-suggestion li:hover {
    background-color: rgba(8, 162, 223, 0.8); 
    border-radius: 6px;
  }

二、下拉列表样式无效解决方法

给 el-autocomplete 组件加上下面属性

:popper-append-to-body="false"

标签：__,el,vue,color,deep,autocomplete,rgba,border
来源： https://blog.csdn.net/u013869554/article/details/120726253