element el-input 去掉邊框

element樣式還是蠻好的，只是有時候我們需要做一些調整，比如，el-input 的邊框，官網是這樣子的

 

 

 我們需要去掉這個邊框

試了常用的：border： none；  以及：outline:none; 但卻沒用

 

tip：將border屬性設成0，雖然邊框不見了，但是瀏覽器依然會對border-width和border-color進行渲染，會占用瀏覽器的資源。將border設置成none，瀏覽器就不會做出渲染動作。

然后就就，就發現個好東西，>>> ， >>> 是vue的深度選擇器，vue引用了第三方組件，需要在組件中局部修改第三方組件的樣式，而又不想去除scoped屬性造成組件之間的樣式污染。此時只能通過 >>> ，穿透scoped。

tip:無任何依賴時,純css寫 >>> 是無效果噠

那我們來看一下怎么操作這個 >>> ，要注意這里是 父級>>>el-input ，必須是這樣，否則沒有效果

<div class="inputDeep">
    <el-input></el-input>
</div>

style這么寫：

<style>
.inputDeep .el-input--medium .el-input__inner{
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0;
}
</style>