vue?element-plus中el-input修改邊框border的方法
更新時間：2022年09月23日 16:12:04 作者：龍丨行
element樣式還是蠻好的,只是有時候我們需要做一些調(diào)整,比如el-input的邊框,下面這篇文章主要給大家介紹了關(guān)于vue?element-plus中el-input修改邊框border的相關(guān)資料,需要的朋友可以參考下
前提：Vue3 + element-plus;
1、去除el-input 的邊框：
<el-input class="inputDeep" readonly v-model="planName"></el-input>
.inputDeep {
:deep(.el-input__wrapper) {
box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
cursor: default;
.el-input__inner {
cursor: default !important;
}
}
}
2、去除 textarea 的邊框：
<el-input type="textarea" class="inputDeep" readonly v-model="planName"></el-input>
.inputDeep {
:deep(.el-textarea__inner) {
box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
resize: none;
cursor: default;
}
}改變 el-input 在focus、blur、hover 狀態(tài)下的border顏色有三種方法：
方法1、直接加class
<el-form-item label="設備名稱">
<el-input
v-model.trim="searchObject.name"
placeholder="請輸入設備名稱"
class="xxxx"
clearable
></el-input>
</el-form-item>
方法2、直接覆蓋原來的樣式**（修改下面三個紅色的樣式即可）**。
方法3、修改整體element-ui 的風格樣式。（直接看官網(wǎng)，簡單易上手）
三種方案的影響范圍各不相同，選擇合適的即可。
下面兄弟問，怎么居中顯示？ 在
el-input__inner 下加 text-align: center; 即可（注意穿透）。
.xxxx {
:deep(.el-input__inner){
text-align: center;
}
}
總結(jié)
到此這篇關(guān)于vue element-plus中el-input修改邊框border的文章就介紹到這了,更多相關(guān)element-plus el-input修改邊框border內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue類名如何獲取動態(tài)生成的元素，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue中Vue.extend()的使用及解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
組件是有name屬性的,匹配的就是組件的name,下面這篇文章主要給大家介紹了關(guān)于vue中組件的name屬性含義和用法的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細介紹了vue實現(xiàn)列表倒計時，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
雖然已經(jīng)擯棄ie的使用,但是在現(xiàn)階段還是在某些場景下需要用到ie,這篇文章主要給大家介紹了關(guān)于vue2項目解決IE、360瀏覽器兼容問題的辦法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-09-09
vue3子組件上綁定(v-model="xx")父組件傳過來的值后報錯解決
這篇文章主要給大家介紹了關(guān)于vue3子組件上綁定(v-model="xx")父組件傳過來的值后報錯解決辦法,文中通過示例代碼介紹的非常詳細,對大家學習或者使用vue3具有一定的參考學習價值,需要的朋友可以參考下2023-07-07
在現(xiàn)代前端開發(fā)中,組件化開發(fā)已經(jīng)成為主流,其中?Vue.js?的插槽（slots）特性為我們構(gòu)建靈活、可復用的組件提供了強有力的支持,下面我們就來看看Vue如何通過插槽實現(xiàn)高復用組件吧2024-11-11
vue監(jiān)聽瀏覽器的后退和刷新事件,阻止默認的事件方式
這篇文章主要介紹了vue監(jiān)聽瀏覽器的后退和刷新事件,阻止默認的事件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
在Web應用中,用戶需要通過認證和授權(quán)才能訪問受保護的資源,為了實現(xiàn)認證和授權(quán)功能,通常需要使用Token來標識用戶身份并驗證其權(quán)限,本文給大家介紹了vue2實現(xiàn)無感刷新token的方式,需要的朋友可以參考下2024-02-02
這篇文章主要為大家介紹了Vue3通用API功能示例剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05