一、Element修改下拉框角標(biāo)

就比如我最近遇上的一個(gè)問題，想要重定義 element 組件庫中的下拉選擇框的角標(biāo)，一直不知道怎么覆蓋才好。

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

如果我們想要重定義element中下拉框的圖標(biāo)，就只要將它的偽元素做一下樣式的修改就好了。

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

只要替換content中的內(nèi)容即可。便可以輕松換掉圖標(biāo)了。

我的效果圖

二、Element修改文本框樣式

問題：

就是最近在我們老師布置的項(xiàng)目中，要求這個(gè)文本框必須沒有那個(gè)三角、其次能夠根據(jù)輸入內(nèi)容自動(dòng)擴(kuò)大。

但是在Element中的組件中，這些都是默認(rèn)的。

2.1、去掉默認(rèn)的三角

textarea{resize: none};

這個(gè)resize屬性就是規(guī)定是否可由用戶調(diào)整元素的尺寸。

none：用戶無法調(diào)整元素的尺寸。

both：用戶可調(diào)整元素的高度和寬度。

horizontal：用戶可調(diào)整元素的寬度。

vertical：用戶可調(diào)整元素的高度。

2.2、根據(jù)輸入內(nèi)容自動(dòng)擴(kuò)大

查了下element文檔，就是給這個(gè)標(biāo)簽添加一個(gè)autosize屬性，便可以做到根據(jù)內(nèi)容自動(dòng)增長。

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

結(jié)果。

注意點(diǎn)

修改這些默認(rèn)樣式的時(shí)候，應(yīng)該放在scope里面，否則會(huì)造成樣式污染。

小白玩家已經(jīng)踩坑😂，大家一定要注意。

三、自言自語

目前還是前端小白，希望大家多多諒解，正在努力中。

紙上得來終覺淺，絕知此事要躬行。

大家好，我是博主寧在春：主頁

一名喜歡文藝卻踏上編程這條道路的小青年。

希望：我們，待別日相見時(shí)，都已有所成。

明天寫偽元素的文章，先立個(gè)Flag在這😁

總結(jié)

以上是生活随笔為你收集整理的「后端小伙伴来学前端了」Element修改默认样式 | 记录自己学习前端踩坑日记的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。