Vue中使用scoped穿透，实现input select边框重写样式。

使用‘scoped穿透’覆盖select（input）样式效果，满足下方效果图效果（elmentUI）

 

<div id="editinfo">

<el-row class="borderStyle">

<el-col :span="8">

<el-select placeholder="楼号" class="borderNone">

<el-option label="区域一" value="001"></el-option>

<el-option label="区域二" value="002"></el-option>

</el-select>

</el-col>

</el-row>
</div>

<style  lang="less" scoped>
#editinfo {
  .borderNone /deep/ .el-input__inner {
    border: none;
  }
  .borderStyle {
    border-radius: 4px;
    border: 1px solid #dcdfe6;
  }
}
</style>

注意：stylus的样式穿透 使用 >>>

  .borderNone >>> .el-input__inner {
    border: none;
  }

           这次使用sass less样式穿透使用 /deep/

  .borderNone /deep/ .el-input__inner {
    border: none;
  }