一、自定义样式,最终效果如下图
常规修改样式代码如下,输入框样式已修改;
/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"