前言

測試A：那啥！摳圖仔，樣式怎么點著點著就出問題了。

前端：啥？css樣式錯亂了？你是不是有緩存啊！清下緩存試試。

測試A（內心戲：這摳圖仔一有問題就賴緩存）：清緩存后，還有啊！你看看吧！

前端：見鬼了，我本地沒復現啊。

1、問題復現

問題描述：在使用element ui的下拉框組件時，下拉框的上下箭頭位置改變了，下邊是問題復現情況。

2、預期效果

預期效果：和官網上保持一致，官網上下拉框上下箭頭效果展示：

3、input框樣式修改解析

打開調試面板，定位到樣式出現問題元素。

寬高修改.el--input

邊框修改 .el-input__inner

修改icon位置及顏色 .el-input__suffix

4、修改方案

在el-input中可以通過更改el-input__icon和el-input__suffix對下拉框的 input 組件顯示圖標進行樣式修改。
調整位置居中：

    ::v-deep .el-input__icon {line-height: 27px;}::v-deep .el-input__suffix{top: 0px;}

拓展學習：
Element源碼分析系列7-Select(下拉選擇框)
Element-UI 10個奇淫技巧，你知道幾個？
vue中修改element的下拉輸入框select框樣式，調整下拉框三角下標
去掉Element 中el-input type=number時尾部上下箭頭、禁用鼠標滾動

在element-ui控件el-select與el-input中前面添加icon圖標

🚀寫在最后

希望我的分享能夠幫助到更多的人，如果覺得我的分享有幫助的話，請大家一鍵三連支持一下哦~
??原創不易，期待你的關注與支持~
點贊👍+收藏??+評論??
😊之后我會繼續更新前端學習小知識，關注我不迷路~