vue?element-plus中el-input修改邊框border的方法

更新時(shí)間：2022年09月23日 16:12:04 作者：龍丨行

element樣式還是蠻好的,只是有時(shí)候我們需要做一些調(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è)備名稱(chēng)">
                    <el-input
                        v-model.trim="searchObject.name"
                        placeholder="請(qǐng)輸入設(shè)備名稱(chēng)"
                        class="xxxx"
                        clearable
                    ></el-input>
                </el-form-item>

方法2、直接覆蓋原來(lái)的樣式**（修改下面三個(gè)紅色的樣式即可）**。

方法3、修改整體element-ui 的風(fēng)格樣式。（直接看官網(wǎng)，簡(jiǎn)單易上手）

三種方案的影響范圍各不相同，選擇合適的即可。

下面兄弟問(wèn)，怎么居中顯示？在

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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue類(lèi)名如何獲取動(dòng)態(tài)生成的元素
這篇文章主要介紹了vue類(lèi)名如何獲取動(dòng)態(tài)生成的元素，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
Vue中Vue.extend()的使用及解析
這篇文章主要介紹了Vue中Vue.extend()的使用及解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
vue中組件的name屬性含義和用法示例
組件是有name屬性的,匹配的就是組件的name,下面這篇文章主要給大家介紹了關(guān)于vue中組件的name屬性含義和用法的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-12-12
vue實(shí)現(xiàn)列表倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)列表倒計(jì)時(shí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-09-09
vue2項(xiàng)目解決IE、360瀏覽器兼容問(wèn)題的辦法
雖然已經(jīng)擯棄ie的使用,但是在現(xiàn)階段還是在某些場(chǎng)景下需要用到ie,這篇文章主要給大家介紹了關(guān)于vue2項(xiàng)目解決IE、360瀏覽器兼容問(wèn)題的辦法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-09-09
vue3子組件上綁定(v-model="xx")父組件傳過(guò)來(lái)的值后報(bào)錯(cuò)解決
這篇文章主要給大家介紹了關(guān)于vue3子組件上綁定(v-model="xx")父組件傳過(guò)來(lái)的值后報(bào)錯(cuò)解決辦法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue3具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2023-07-07
Vue使用插槽實(shí)現(xiàn)高復(fù)用組件
在現(xiàn)代前端開(kāi)發(fā)中,組件化開(kāi)發(fā)已經(jīng)成為主流,其中?Vue.js?的插槽（slots）特性為我們構(gòu)建靈活、可復(fù)用的組件提供了強(qiáng)有力的支持,下面我們就來(lái)看看Vue如何通過(guò)插槽實(shí)現(xiàn)高復(fù)用組件吧
2024-11-11
vue監(jiān)聽(tīng)瀏覽器的后退和刷新事件,阻止默認(rèn)的事件方式
這篇文章主要介紹了vue監(jiān)聽(tīng)瀏覽器的后退和刷新事件,阻止默認(rèn)的事件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue2實(shí)現(xiàn)無(wú)感刷新token的方式詳解
在Web應(yīng)用中,用戶需要通過(guò)認(rèn)證和授權(quán)才能訪問(wèn)受保護(hù)的資源,為了實(shí)現(xiàn)認(rèn)證和授權(quán)功能,通常需要使用Token來(lái)標(biāo)識(shí)用戶身份并驗(yàn)證其權(quán)限,本文給大家介紹了vue2實(shí)現(xiàn)無(wú)感刷新token的方式,需要的朋友可以參考下
2024-02-02
Vue3通用API功能示例剖析
這篇文章主要為大家介紹了Vue3通用API功能示例剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05