1: How to modify the style of the options in the el-select drop-down box. There are generally two methods on the Internet:
1. Find the class name of the drop-down box and write a global style.
2. Modify the style content of .el-select-dropdown__item through /deep/
3. Add the style through the class name set by popper-class
Among the above methods, the second and third methods are not effective, and although the first method is possible, it will cause style pollution. When the package is uploaded to the server, the styles in other places may be changed.
2: Problem analysis
The picture above shows the structure of the page when the el-select option is selected. The container of the option is not in the mounted div#app, but a sibling element of div#app. When we set the style in the component, add With scoped, the scope is limited to div#app, so the set style cannot be applied to the div of the option content.
Note: In the el-select component, only the option container is outside div#app by default, and the displayed div.el-input is still in div#app.
Three: Problem Solving
The Popper-append-to-body attribute is an attribute provided in the official Element-UI documentation. The purpose of this attribute is to move the content of the el-select option into div#app. The default value is true. The following picture shows the DOM structure display when the attribute is set to false.
<div class="search-tool">
<el-select
v-model="city"
filterable
placeholder="Please select"
:popper-append-to-body='false'
@change="handleSelect"
>
<el-option
v-for="item in citys"
:key="item.AreaCode"
:label="item.City"
:value="item.AreaCode"
></el-option>
</el-select>
</div>
Four: Style modification.
The style compiled by less needs to install less and less-loader in advance, and configure the parsing command in the configuration file.
<style lang="scss" scoped>
.search-tool {
position: absolute;
top: 0.2rem;
left: 5px;
z-index: 1000;
display: flex;
align-items: center;
// background-color: azure;
background: rgba(21,43,94,0.3);
border-radius: 30px;
}
// When no option is selected, the placeholder style needs to select the parent element first to increase the weight.
::v-deep input::-webkit-input-placeholder {
color: #fff;
}
::v-deep input::-moz-input-placeholder {
color: #fff;
}
::v-deep input::-ms-input-placeholder {
color: #fff;
}
//What is modified is the style of el-input
//One method is to set the background color of the innermost layer el-input__inner and set the outer two-level parent element to a transparent color.
//Another method is to set the background color from el-select to el-input__inenr to the required color
::v-deep .el-select,
::v-deep .el-input,
::v-deep .el-input__inner{
background:rgba(21,43,94,0.3);
color:#fff;
border:0px;
border-radius:0px;
text-align: center;
}
//When el-input is focused, the outer border will have a style
::v-deep .el-select .el-input.is-focus .el-input__inner{
border:0px;
}
//What is modified is the color of the small icons above and below el-input
::v-deep .el-select .el-input .el-select__caret{
color:#fff;
}
//Modify the outermost style of the overall options
::v-deep .el-select-dropdown{
background:rgba(21,43,94,0.3);
margin: 0px;
border:0px;
border-radius: 0px;
left: 0px !important;
}
//Modify the style of a single option
::v-deep .el-select-dropdown__item{
background-color: transparent;
color:#fff;
}
//hover style of item option
::v-deep .el-select-dropdown__item.hover,
::v-deep .el-select-dropdown__item:hover{
color:rgb(21,43,94);
}
//What is modified is the sharp corner above the content of the drop-down box option
::v-deep .el-popper .popper__arrow, .el-popper .popper__arrow::after{
display: none;
}
</style>