el-select如何改变样式 （:popper-append-to-body=“false“）

在使用el-select的时候，其样式会按照Elementui自带的默认样式为基准；

 但往往开发过程中，下拉框的样式可能并不是我们想要的；这是我遇到过的一个案例，开发需求上与elementui默认样式大相径庭；

 如何进行修改呢？

通过Element-ui的Select Attributes可发现，有这样一个属性 popper-append-to-body

popper-append-to-body是一个Popper.js库的选项，用于指定Popper元素是否应该附加到文档的body元素上。如果设置为true，则Popper元素将附加到body元素上，否则将附加到参考元素的父元素上。这个选项可以用来解决一些样式问题，例如在使用z-index时，如果Popper元素不附加到body元素上，可能会被其他元素遮挡。

我们先把其popper-append-to-body的属性设为false，让其可以修改el-select的局部样式；

之后按照其ui视图对样式进行分析；

 需要知道的有el-select里层元素，对里层元素进行样式操作；

• el-input__inner的背景色——外层的两级父元素设置为透明色；

• el-input聚焦的时候——外层的border会有一个样式；

• el-input上下图标——样式设置 ；

• el-select最外层.el-select-dropdown 我这边给加了opacity及定位属性；

• .el-select-dropdown__item——单个选项的样式修改

• .el-select-dropdown__item:hover——hover时的样式

• .popper__arrow::after——修改的是下拉框选项内容上方的尖角

仅供参考：按项目ui为准；