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

©2020 ioDraw All rights reserved
Self made whole person computer program PHP call shell command python Simple record of network programming layui.table Examples of dynamically getting header and list data Big data environment --- data warehouse (hive+mysql+hadoop) The construction of What are the types of variables ?MYSQL database DML Common commands 《 From machine learning to deep learning 》 note (2) Unsupervised learning log4j Method of printing exception stack information Android Development — Display food information according to customer budget