Problem description

The style of the ELme UI is generally enough, but sometimes we need to modify the style to make it more beautiful. In this article, we will record how to modify the style of el-Select, and check back when you forget

Problem analysis

The drop-down box can be divided into two parts, one part is the “box” part, the other part is the “drop down” part, usually we modify the drop-down box style, nothing more than to modify these two parts, as shown in the picture below

Modify the width of the box

The easiest way to change the width of the el-select box is to add a style style to the el-select box. Note that setting the height using the style style will not work, nor will setting the height because the height is adaptive and will be extended by the content

The following code

<! > < span style = "box-sizing: border-box! Important; word-wrap: break-word! Important;<el-select style="width:400px;" v-model="value" placeholder="Please select">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
Copy the code

The renderings are as follows

It does get wider

Modify the drop-down style

Method 1 (global modification in index.html)

As you can see from the image above, the dropdown is not in the DOM of el-Select, but in the outermost element. This outermost element is a sibling of the mount #App element, so we need to change the styling in the index.html file of the vue project entry

The following code

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>
    <%= htmlWebpackPlugin.options.title %>
  </title>
  <style>
    /* Where to find the hierarchy */
    .el-select-dropdown .el-scrollbar .el-select-dropdown__wrap .el-scrollbar__view .el-select-dropdown__item:hover {
      background-color: #baf;
    }
  </style>
</head>
Copy the code

The renderings are as follows

But changing the style in the index. HTML file will pollute the whole world. If I want to change the style of the dropdown on one page and leave the dropdown on the other page, that’s not a good idea, but if I want to change the style of the dropdown on all the other pages, it’s a good idea. Add down we say that the second kind of way, use that hungry UI provided by el – select the properties of the popper – append – to – the body attribute, official introduction is as follows:

Obviously, ele. me officially adds the pull-down part to by default, so we can use this property to remove it from the body and revert it back to the corresponding el-select, that is, put the pull-down part back into the corresponding structure.

Method 2: Popper-append-to-body

<template>
  <div>
    <el-select v-model="value" :popper-append-to-body="false" placeholder="Please select">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
  </div>
</template>
Copy the code

Review the DOM element structure

Now that we have added el-Select, we can use the CSS selector to find the appropriate level to set the style, and still achieve the effect shown above

<style lang="less" scoped>
.el-select {
    .el-select-dropdown {
        .el-scrollbar {
            .el-select-dropdown__wrap {
                .el-scrollbar__view {
                    .el-select-dropdown__item:hover {
                        background-color: #baf; }}}}}} </style>
Copy the code

supplement

Popper-append-to-body is used with the popper-class. It is not necessary to use the popper-append-to-body with the el-select structure. Poper-class can be used like this:

Popper-class is the name of the class for the select dropdown. When used together, it makes CSS code simpler