Element修改默认样式 | 记录自己学习前端踩坑日记
2021/11/7 6:14:09
本文主要是介绍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-input type="textarea" :rows="5" placeholder="Enter Question..." v-model="textarea" autosize > </el-input>
结果。
注意点
修改这些默认样式的时候,应该放在scope里面,否则会造成样式污染。
小白玩家已经踩坑
这篇关于Element修改默认样式 | 记录自己学习前端踩坑日记的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-04-07金融企业区域集中库的设计构想和测试验证
- 2024-03-11前端CSS的工程化——掌握Sass这四大特性就够了
- 2024-02-21h5关联css样式(html怎么和css关联)-icode9专业技术文章分享
- 2024-02-07Firefox禁止远程字体加速网页加载及图标字体补充安装
- 2024-02-07一个菜鸡前端的3年总结-「2023」
- 2024-01-18最火前端Web组态软件(可视化)
- 2024-01-12程序员提效 x10 的必备开源“神器”
- 2024-01-11前端可以监控静态资源的时间吗-icode9专业技术文章分享
- 2024-01-11前端系列:ES6-ES12新语法
- 2024-01-03前端 Git 使用约定