Vue使用Element的下拉框Select一些样式的修改_vue3 element plus中el-select 选择框中文字样式

一般在vue中更改Element的样式，都是深度更改样式，因此需要在样式外面套上::v-deep{}

1、更改下拉框提示文字（placeholder）的的样式；

一句话，一点点样式就搞定了。

 ::v-deep {
    .el-input__inner{
         &::placeholder {
            color: red;
      }
    }
  }
1
2
3
4
5
6
7

select就是Element里面的select第一个例子，怕有的大家看不明白，下面是完整的代码

**<template>
  <div class="change-select">
    <el-select class="true-select" v-model="value" placeholder="请选择下拉框内容">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  components: {},
  props: {
    msg: String,
  },
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "",
    };
  },
  methods: {
  },
};
</script>

<style lang="scss"  scoped>
.change-select{
  height: 200px;
  width: 300px;
  border-radius:4px;
  margin: 30px 80px;
}
.true-select{
  margin: 20px 10px;
}
 ::v-deep {
    .el-input__inner{
         &::placeholder {
           color: red;
      }
    }
  }
</style>>

**
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

2、去除select下拉框的边框，让下拉框看起来只有文字+后面的图标；或者更改下拉框边框的颜色
这是我写的一个div，填充了背景颜色而已

思路1：将下拉框的（边框颜色+背景颜色）设置为和背景一模一样；
思路2：把边框border设置为none
也是在css样式里面修改，在.el-input__inner{}里面改即可

完整代码如下：

<template>
  <div class="change-select">
    <el-select class="true-select" v-model="value" placeholder="请选择下拉框内容">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  components: {},
  props: {
    msg: String,
  },
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "",
    };
  },
  methods: {
  },
};
</script>

<style lang="scss"  scoped>
.change-select{
  border:1px solid #e6e3e3;
  background: #e6e3e3;
  height: 200px;
  width: 300px;
  border-radius:4px;
  margin: 30px 80px;
}
.true-select{
  margin: 20px 10px;
}
 ::v-deep {
    .el-input__inner{
      border:1px solid #e6e3e3;
      background-color: #e6e3e3;
         &::placeholder {
           color: #000000;
      }
    }
  }
</style>>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

3、更换下拉框后面的下拉图标

如果想取消图标，可把content设置为none。想替换图标就要更改content的值，目前我只找到更改为element自带的一些图标，在node_modules里面的node_modules\element-ui\packages\theme-chalk\src\icon.scss，这里存放的是element默认的一些样式及图标。