一：如何修改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;
}
}