本文主要介紹了element el-input 刪除邊框的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

我們?cè)谑褂胑lement ui的 el-input輸入框時(shí)，會(huì)面臨這樣的問(wèn)題：
官網(wǎng)的樣式：

而我們需要的：

我們正常的操作是：但發(fā)現(xiàn)行不通…

style="border: 0px;"

然后經(jīng)過(guò)查找資料，發(fā)現(xiàn)可以用” >>>“，這是vue的深度選擇器，vue引用了第三方組件，需要在組件中局部修改第三方組件的樣式；所以我們更改代碼：

<div class="inputDeep">
	<el-input size="medium " value="工況結(jié)束時(shí)間"></el-input>
 </div>
<style>
.inputDeep >>> .el-input__inner {
  border: 0px;
  box-shadow: 0 0 0 0px;
}
</style>

但是發(fā)現(xiàn)并沒(méi)有效果，原因是我們要在<style>標(biāo)簽內(nèi)加上scoped屬性才能生效

<style scoped>
.inputDeep >>> .el-input__inner {
  border: 0px;
  box-shadow: 0 0 0 0px;
}
</style>

另外，有些Sass 之類(lèi)的預(yù)處理器無(wú)法正確解析 >>>，可以使用 /deep/ 操作符( >>> 的別名)，如下：

<style scoped>
.inputDeep /deep/.el-input__inner {
  border: 0px;
  box-shadow: 0 0 0 0px;
}
</style>

可以順利的去掉input輸入框的邊框~

到此這篇關(guān)于element el-input 刪除邊框的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)element el-input 刪除邊框內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

js無(wú)痛刷新Token的實(shí)現(xiàn)
本文主要介紹了js無(wú)痛刷新Token的實(shí)現(xiàn)，文中根據(jù)實(shí)例編碼詳細(xì)介紹的十分詳盡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
Array.prototype.slice.apply的使用方法
arguments在JavaScript語(yǔ)法中是函數(shù)特有的一個(gè)對(duì)象屬性(Arguments對(duì)象)，用來(lái)引用調(diào)用該函數(shù)時(shí)傳遞的實(shí)際參數(shù)。
2010-03-03
微信小程序tabBar底部導(dǎo)航中文注解api詳解
這篇文章主要為大家詳細(xì)介紹了微信小程序tabBar底部導(dǎo)航中文注解api，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
setInterval計(jì)時(shí)器不準(zhǔn)的問(wèn)題解決方法
在js中如果打算使用setInterval進(jìn)行倒數(shù),計(jì)時(shí)等功能，往往是不準(zhǔn)確的，針對(duì)這個(gè)問(wèn)題，本文有個(gè)不錯(cuò)的解決方案
2014-05-05
Bootstrap基本組件學(xué)習(xí)筆記之縮略圖(13)
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本組件學(xué)習(xí)筆記之縮略圖,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
IE6圖片加載的一個(gè)BUG解決方法
小圖整合在一張大圖里，然后在不同的CSS里調(diào)用同一張圖片，以此來(lái)減少請(qǐng)求數(shù)，這是頁(yè)面優(yōu)化最常用的手段，但I(xiàn)E6會(huì)對(duì)頁(yè)面里同一個(gè)圖片，只要在不同的地方有引用到就會(huì)重新請(qǐng)求一次，需要加JS代碼解決。
2010-07-07
CodeReview常見(jiàn)的幾個(gè)問(wèn)題梳理解決示例
這篇文章主要為大家介紹了CodeReview常見(jiàn)的幾個(gè)問(wèn)題梳理解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
簡(jiǎn)單實(shí)現(xiàn)jquery焦點(diǎn)圖
這篇文章主要為大家詳細(xì)介紹了如何簡(jiǎn)單實(shí)現(xiàn)jquery焦點(diǎn)圖效果,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
使用js和canvas實(shí)現(xiàn)時(shí)鐘效果
這篇文章主要為大家詳細(xì)介紹了使用js和canvas實(shí)現(xiàn)時(shí)鐘效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-09-09
uniapp中獲取dom元素的方法及更改dom元素顏色踩坑記錄
最近學(xué)到了一個(gè)比較好用的框架uni-app,可以做六端適配,學(xué)習(xí)一下,下面這篇文章主要給大家介紹了關(guān)于uniapp中獲取dom元素的方法及更改dom元素顏色踩坑記錄的相關(guān)資料,需要的朋友可以參考下
2023-03-03