popper-append-to-body屬性是Element-UI官方文檔中提供的一個屬性,該屬性的用途就是將el-select選項的內容移動div#app當中,默認值是true
<el-select
:popper-append-to-body="false"
v-model="taskType"
placeholder="請選擇"
size="mini"
class="select-style"
popper-class="select-popper"
>
css
.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;
}
}