element el-input 刪除邊框的實現(xiàn)

更新時間：2023年04月28日 10:14:29 作者：今天上上簽

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

我們在使用element ui的 el-input輸入框時，會面臨這樣的問題：
官網(wǎng)的樣式：

而我們需要的：

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

style="border: 0px;"

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

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

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

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

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

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

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

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

您可能感興趣的文章:

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