「后端小伙伴来学前端了」Element修改默认样式

一、Element修改下拉框角标

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

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

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

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

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

我的效果图

二、Element修改文本框样式

问题：

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

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

2.1、去掉默认的三角

textarea{resize: none};

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

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

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

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

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

结果。

注意点

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

小白玩家已经踩坑

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

「后端小伙伴来学前端了」Vue脚手架中 render 函数
前言上一篇文章写了:「后端小伙伴来学前端了」分析Vue脚手架结构简单说明了Vue的脚手架结构,但是上篇文章还欠了个小点没有说完,就在这篇文章中补齐.就是所谓的render函数. 一.main.js ...
「后端小伙伴来学前端了」Vue中 this.$set的用法 | 可用于修改对象中数组的某一个对象、可用于更新数据到视图
夜晚有明月,梦里有佳人前言最近在写老师布置的vue项目,真的说实话,每天真就是在百度.google.bing等各个搜索引擎之间反复横跳,不然就是掘金搜一搜.思否搜一搜,还有CSDN看一看.我的前端 ...
「后端小伙伴来学前端了」Vue中为什么直接安装less-loader会报版本过高错误？你有没有思考过？
清晨的☀ 前言我们都知道在 Vue 中并不只有纯正的CSS,还有less.sass等,后面这些,写起来都可以级联着,不需要像原生的css那样,会方便很多. 大家都知道我也是最近写的vue,看见周围人 ...
「后端小伙伴来学前端了」分析Vue脚手架结构
傍晚的月亮前言每日匆匆忙忙的写老师布置的 Vue 项目,对于 Vue 始终没有一个系统的认知,每天都是遇到什么问题就去查什么样的问题.看起来好像也没啥问题,但是所有的知识都是混入的,导致没有一个像 ...
「后端小伙伴来学前端了」记录自己的踩坑第一天 | CSS:vertical-align 属性
前言最近老师让大家单独写前后端分离项目,真是大家卷完后端,一起去卷前端了.(我以前都是主要负责后端,处于只大致看的懂的级别,说多了都是泪啊). 真是处于一边学一边写的状态,基本就是每天早上看上两~三 ...
「后端小伙伴来学前端了」Vue中学会使用Echarts生成各种各样的图表，得学学了，必须要会的基本操作了
依旧还是学妹给的封面直接进入主题-在vue中使用个啥,都差不多是一个流程. 引入Echarts 安装 npm install echarts --save 我们写一个Echarts组件,在内进行引入 ...
「后端小伙伴来学前端了」CSS3伪元素选择器 ::before ::after | 记录自己的前端学习日子
写在前面:最近冷空气来临,大家注意保暖,如果有时间,也给许久未见的家人.朋友.那个你想见没去见的人打个冬日的暖心电话吧.别等了,就这次吧. 2021年11月7日,立冬之时前言本文适合前端小白,或者 ...
「后端小伙伴来学前端了」Vue-Router 路由各种跳转、传参、小知识
前言学完Vuex方面的操作就该来学学Vue中的路由操作了- xdm冲一.安装 vue-cli 安装 vue add router 做完这一步基础环境都搭好了. 项目中会多一个文件夹,内容如下: ...
「后端小伙伴来学前端了」Vuex进阶操作，让你的代码更加高效（简称如何学会偷懒【手动狗头】）
学妹手机里的美照前言前一篇写了Vuex基本使用,用起来还稍稍有些繁琐,代码有很多冗余的地方,这篇就带着大家用更简单的方式来使用Vuex(其实就是怎么更好的偷懒,用更少的代码来完之前的事情) 进入 ...

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

一、Element修改下拉框角标

二、Element修改文本框样式

2.1、去掉默认的三角

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

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

最新文章

热门文章