「后端小伙伴来学前端了」Element修改默认样式 | 记录自己学习前端踩坑日记

一、Element修改下拉框角标

就比如我最近遇上的一个问题，想要重定义 element 组件库中的下拉选择框的角标，一直不知道怎么覆盖才好。

最后才知道是由伪元素做的。

如果我们想要重定义element中下拉框的图标，就只要将它的伪元素做一下样式的修改就好了。

代码语言：javascript复制

.el-select__caret::before{
    content: "e78f"!important;
    font-size: 18px;
}

只要替换content中的内容即可。便可以轻松换掉图标了。

我的效果图

二、Element修改文本框样式

问题：

就是最近在我们老师布置的项目中，要求这个文本框必须没有那个三角、其次能够根据输入内容自动扩大。

但是在Element中的组件中，这些都是默认的。

2.1、去掉默认的三角

代码语言：javascript复制

textarea{resize: none};

这个resize属性就是规定是否可由用户调整元素的尺寸。

1. none：用户无法调整元素的尺寸。
2. both：用户可调整元素的高度和宽度。
3. horizontal：用户可调整元素的宽度。
4. vertical：用户可调整元素的高度。

2.2、根据输入内容自动扩大

查了下element文档，就是给这个标签添加一个autosize属性，便可以做到根据内容自动增长。

代码语言：javascript复制

<el-input
          type="textarea"
          :rows="5"
          placeholder="Enter Question..."
          v-model="textarea"
          autosize
          >
</el-input>

结果。

注意点

修改这些默认样式的时候，应该放在scope里面，否则会造成样式污染。

小白玩家已经踩坑