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