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="設(shè)備名稱">
<el-input
v-model.trim="searchObject.name"
placeholder="請輸入設(shè)備名稱"
class="xxxx"
clearable
></el-input>
</el-form-item>
方法2、直接覆蓋原來的樣式**（修改下面三個紅色的樣式即可）**。
方法3、修改整體element-ui 的風(fēng)格樣式。（直接看官網(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.js和Element-UI做一個簡單登錄頁面的實例
下面小編就為大家分享一篇使用Vue.js和Element-UI做一個簡單登錄頁面的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
下面小編就為大家分享一篇Vue.js 點擊按鈕顯示/隱藏內(nèi)容的實例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
組件是vue.js最強大的功能之一,而組件實例的作用域是相互獨立的,這就意味著不同組件之間的數(shù)據(jù)無法相互引用,這篇文章主要給大家介紹了關(guān)于Vue3的10種組件通信方式的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-03-03
vue項目如何實現(xiàn)前端預(yù)覽word與pdf格式文件
最近項目中需要在線預(yù)覽WORD文檔,所以給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于vue項目如何實現(xiàn)前端預(yù)覽word與pdf格式文件的相關(guān)資料,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了Vue enter回車導(dǎo)致頁面刷新問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue父子模板傳值問題解決方法,結(jié)合案例形式分析了vue.js父子模板傳值問題相關(guān)實現(xiàn)方法與具體操作步驟,需要的朋友可以參考下2020-02-02
Vue中filter使用及根據(jù)id刪除數(shù)組元素方式
這篇文章主要介紹了Vue中filter使用及根據(jù)id刪除數(shù)組元素方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家介紹了VUE指令和pinia控制按鈕權(quán)限示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
vue1.0和vue2.0的watch監(jiān)聽事件寫法詳解
今天小編就為大家分享一篇vue1.0和vue2.0的watch監(jiān)聽事件寫法詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
最近在做項目中前端采用Vue技術(shù),發(fā)現(xiàn)首頁加載速度非常之慢,下面這篇文章主要給大家介紹了關(guān)于vue終極性能優(yōu)化方案,主要解決首頁加載慢問題,需要的朋友可以參考下2022-02-02