HTML5教程

Element修改默认样式 | 记录自己学习前端踩坑日记

本文主要是介绍Element修改默认样式 | 记录自己学习前端踩坑日记,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

一、Element修改下拉框角标

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

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

image-20211106003357324

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

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

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

我的效果图

image-20211106003629400

二、Element修改文本框样式

问题:

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

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

image-20211106233137129

2.1、去掉默认的三角

textarea{resize: none};

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

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

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

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

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

结果。

image-20211106234208660

注意点

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

小白玩家已经踩坑

这篇关于Element修改默认样式 | 记录自己学习前端踩坑日记的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!