©2020-2024 ioDraw All rights reserved
One ： How to modify el-select The style of the options in the drop-down box , There are generally two methods on the Internet ：
1. Find the class name of the drop-down box , Write a global style .
2. adopt /deep/ To modify .el-select-dropdown__item Style content of
3. adopt popper-class Set the class name add style
In the above ways , The second and third are not effective , And the first form, though, can , But it can cause style pollution , When the package is uploaded to the server , The style in other places may change as a result .
Two ： problem analysis
The picture above shows that when the el-select The structure of the page , The container for the option is not mounted div#app in , It is div#app Brother elements of , When we set styles in components , Added scoped, The scope is limited to div#app in , Therefore, the set style will not work normally on the option content div upper .
notes ：el-select Component , Only the container for options defaults to div#app Outside , On display div.el-input Is it still there div#app in .
Three ： Problem solving
Popper-append-to-body Property is Element-UI An attribute provided in official documents , The purpose of this property is to set the el-select Content movement of options div#app among , The default value is true, The next image is to set the property to false Time DOM Structure display .
<el-select v-model="value" placeholder=" Please select " :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>
Four ： Style modification
Used less Compiled style It needs to be installed in advance less and less-loader, And configure the parsing command in the configuration file
.hello{ // When no option is selected placeholder Style of The parent element needs to be selected first Increase weight /deep/
input::-webkit-input-placeholder { color: #fff; } /deep/
input::-moz-input-placeholder { color: #fff; } /deep/
input::-ms-input-placeholder { color: #fff; } // What's changed is el-input Style of
// One way is to set the innermost layer el-input__inner Background color of The outer two-level parent elements are set to transparent color
// The other way is from the el-select reach el-input__inenr The background color of the is set to the desired color /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 When focusing
Outer layer border There will be a pattern /deep/ .el-select .el-input.is-focus .el-input__inner{ border:
0px; } // What's changed is el-input The color of the small icons above and below /deep/ .el-select .el-input .el-select__caret{
color:#fff; } // Change the style of overall options Outermost layer /deep/ .el-select-dropdown{ background-color:
#08164d; margin: 0px; border:0px; border-radius: 0px; } // Change the style of individual options /deep/
.el-select-dropdown__item{ background-color: transparent; color:#fff; }
//item Optional hover style /deep/ .el-select-dropdown__item.hover, /deep/
.el-select-dropdown__item:hover{ color:#409eff; } // The change is the sharp corner above the contents of the drop-down box options /deep/
.el-popper .popper__arrow, .el-popper .popper__arrow::after{ display: none; } }
Technology