修改el-select样式

popper-append-to-body属性是Element-UI官⽅⽂档中提供的⼀个属性，该属性的⽤途就是将el-select选项的内容移动div#app当中，默认值是true

: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; }}