一、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里面，否則會造成樣式污染。

小白玩家已經踩坑😂，大家一定要注意。

三、自言自語

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

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

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

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。