Detailed explanation of how to modify the style of el-select: popper-append-to-body and popper-class

How to modify the style of the el-select component provided by elementUI

There are many solutions to this problem on the Internet:

1. Find the class name of the drop-down box and write a全局樣式覆蓋it.
2. Modify the style of .el-select-dropdown__item
3. Modify the style through popper-class provided by the official website

However, the above method does not hit the point. Overriding the global style is definitely not user-friendly, and modifying the style and adding classes do not work either. So, I looked at the style of the drop-down box. It was not in el-select , but placed on the outermost layer, as shown below:

Then I went to the official website to see if there is a property to control it, and sure enough, there is such a person popper-append-to-body :

The default value is true , change it to false to make it work

HTML

<el-select
    :popper-append-to-body="false"
    v-model="taskType"
    placeholder="Please select"
    size="mini"
    class="select-style"
    popper-class="select-popper"
  >
    <el-option
      v-for="(item,index) in taskTypes"
      :key="index"
      :value="item.value"
      :label="item.label"
    ></el-option>
  </el-select>

The code structure is as follows:

In fact, this only changes the style inside the drop-down box. The style of the input box also needs to be modified by modifying the .el-input__inner style:

CSS

.select-style {
    width: 3rem;
    margin-right: 0.36rem;
    /deep/.el-input__inner {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      border: 1px solid #a1a3ad;
      border-left-width: 0;
      background-color: rgba(0, 0, 0, 0.8);
      font-family: PingFangSC-Regular;
      font-size: 0.28rem;
      color: rgba(255, 255, 255, 0.6);
    }
  }

Finally, attach the style of .select-popper :

/deep/.select-popper {
    background-color: $item-bg-color;
    border-radius: 0.08rem;
    border: solid 0.02rem #1c395d;
    font-family: PingFangSC-Regular;
    .el-select-dropdown__item.selected {
      font-family: PingFangSC-Regular;
      font-size: 0.28rem;
      color: rgba(74, 141, 253, 1);
    }
    li {
      color: #fff;
      background: transparent;
      color: #fff;
      font-size: 0.28rem;
    }
    .el-select-dropdown__item:hover,
    .el-select-dropdown__item.hover {
      background-color: rgba(110, 147, 206, 0.2);
      margin-right: 1px;
    }
    .popper__arrow::after {
      border-bottom-color: $item-bg-color;
    }
    .popper__arrow {
      border-bottom-color: $item-bg-color;
    }
    .el-select-dropdown__empty {
      padding: 0.2rem;
      font-size: 0.28rem;
    }
  }

Summarize

Key point: :popper-append-to-body="false" , then add popper-class to modify the style.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: Professional and non-professional web design

>>: JavaScript Basics: Immediate Execution Function

Detailed explanation of how to modify the style of el-select: popper-append-to-body and popper-class

MySQL Database Indexes and Transactions

A line of CSS code that crashes Chrome

Write a dynamic clock on a web page in HTML

Teach you the detailed process of installing DOClever with Docker Compose

Solution to the problem of null column in NOT IN filling pit in MySQL

Solution to the problem that the MySQL database cannot be accessed by other IP addresses

Vue Getting Started with Weather Forecast

WeChat applet picker multi-column selector (mode = multiSelector)

3 simple ways to achieve carousel effects with JS

How to install docker on ubuntu20.04 LTS

Recommend

Two ways to write stored procedures in Mysql with and without return values

The difference between datatime and timestamp in MySQL

Implementing carousel effects with JavaScript

How to Install and Configure Postfix Mail Server on CentOS 8

Conditional comments to determine the browser (IE series)

Practice of el-cascader cascade selector in elementui

Detailed explanation of CSS elastic box flex-grow, flex-shrink, flex-basis

How to expand the disk partition for centos system

CSS Sticky Footer Implementation Code

Django+vue registration and login sample code

Linux system MySQL8.0.19 quick installation and configuration tutorial diagram

Detailed explanation of Vue parent-child component value transfer and one-way data flow issues

Optimization methods when Mysql occupies too high CPU (must read)

Vue+swiper realizes timeline effect

Detailed explanation of whether the MySQL database should use foreign key constraints