一：如何修改el-select下拉框中選項的樣式，網上的方法一般有兩種：
1.找到下拉框的類名，寫一個全局的樣式。
2.通過/deep/來修改.el-select-dropdown__item的樣式內容
3.通過popper-class設置的類名添加樣式
以上幾種方式中，第二種和第三種是無法生效的，而第一種形式雖然可以，但是會造成樣式污染，在打包上傳到服務器的時候，其他地方的樣式可能會因此發生改變。
二：問題分析
上圖中顯示的是當選中el-select的選項時頁面的結構，選項的容器並不在掛載的div#app中，而是div#app的兄弟元素，我們在組件中設置樣式的時候，加上了scoped，作用域都是局限在div#app中，所以設置的樣式就無法正常作用到選項內容的div上。
注：el-select組件中，只有選項的容器默認是div#app之外的，展示的div.el-input還是在div#app之中。
三：問題解決
Popper-append-to-body屬性是Element-UI官方文檔中提供的一個屬性，該屬性的用途就是將el-select選項的內容移動div#app當中，默認值是true，下面一張圖是將該屬性設置為false時的DOM結構展示。
<el-select v-model="value" placeholder="請選擇" :popper-append-to-body="false">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
四：樣式修改
使用的less編譯的樣式 需要提前安裝less 和 less-loader,並在配置文件中配置解析命令
.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;
}
}