快捷導(dǎo)航

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

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

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

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

而我們需要的：

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

style="border: 0px;"

然后經(jīng)過查找資料，發(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)并沒有效果，原因是我們要在<style>標(biāo)簽內(nèi)加上scoped屬性才能生效

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

另外，有些Sass 之類的預(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中arguments對(duì)象的深入理解
這篇文章主要給大家介紹了關(guān)于js中arguments對(duì)象的深入理解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用javascript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
文本框只能輸入數(shù)字的js代碼(含小數(shù)點(diǎn))
下面小編就為大家?guī)?lái)一篇文本框只能輸入數(shù)字的js代碼(含小數(shù)點(diǎn))。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2016-07-07
基于js實(shí)現(xiàn)的圖片拖拽排序源碼實(shí)例
這篇文章主要給大家介紹了關(guān)于如何基于js實(shí)現(xiàn)的圖片拖拽排序的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-11-11
微信小程序自定義導(dǎo)航欄及其封裝的全過程
在小程序項(xiàng)目開發(fā)過程中常遇到自定義導(dǎo)航欄的需求,所以下面這篇文章主要給大家介紹了關(guān)于微信小程序自定義導(dǎo)航欄及其封裝的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-12-12
JavaScript靜態(tài)的動(dòng)態(tài)
JavaScript靜態(tài)的動(dòng)態(tài)...
2006-09-09
使用mini-define實(shí)現(xiàn)前端代碼的模塊化管理
這篇文章主要介紹了使用mini-define實(shí)現(xiàn)前端代碼的模塊化管理，十分不錯(cuò)的一篇文章，這里推薦給有需要的小伙伴。
2014-12-12
js中this的指向問題歸納總結(jié)
最近發(fā)現(xiàn)在對(duì)JS的學(xué)習(xí)中有很多朋友對(duì)this的指向問題還是有很大的誤區(qū)或者說只是大致了解,但是一旦遇到復(fù)雜的情況就會(huì)因?yàn)閠his指向問題而引發(fā)各種bug。所以這篇文章主要給大家介紹了關(guān)于js中this的指向問題的相關(guān)資料，需要的朋友可以參考下
2018-11-11
原生javascript實(shí)現(xiàn)勻速運(yùn)動(dòng)動(dòng)畫效果
這篇文章主要為大家詳細(xì)介紹了原生javascript實(shí)現(xiàn)勻速運(yùn)動(dòng)動(dòng)畫效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-02-02
前端判斷頁(yè)面是在PC端還是移動(dòng)端打開四種方法
本文介紹幾種在前端開發(fā)中用于判斷用戶設(shè)備類型（PC端或移動(dòng)端）的方法,包括使用navigator.userAgent、媒體查詢、第三方庫(kù)detect.js和Vue框架插件vue-device-detect,這些方法有助于在開發(fā)中處理設(shè)備適配和頁(yè)面權(quán)限問題,需要的朋友可以參考下
2024-10-10
JS一維數(shù)組轉(zhuǎn)化為三維數(shù)組方法
這篇文章主要給大家分享了JS一維數(shù)組轉(zhuǎn)化為三維數(shù)組的方法，下面文章圍繞JS數(shù)組轉(zhuǎn)換的相關(guān)資料展開內(nèi)容，對(duì)大家的學(xué)習(xí)有一定的參考價(jià)值，需要的小伙伴可以參考一下
2022-01-01