element el-input 去掉边框

末蓝、 2022-12-22 11:08 421阅读 0赞

element样式还是蛮好的，只是有时候我们需要做一些调整，比如，el-input 的边框，官网是这样子的

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70][]

我们需要这样子的

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 1][]

然后我们常规操作，**border: none; ** 或者 **border: 0;** 发现行不通，哈哈哈哈哈

tip：将border属性设成0，虽然边框不见了，但是浏览器依然会对border-width和border-color进行渲染，会占用浏览器的资源。将border设置成none，浏览器就不会做出渲染动作。

然后就就，就发现个好东西，**>>>  ** ， **>>>** 是vue的深度选择器，vue引用了第三方组件，需要在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。此时只能通过 **>>> **，穿透scoped。

tip:无任何依赖时,纯css写 **>>> **是无效果哒

那我们来看一下怎么操作这个 **>>> ** ，要注意这里是  **父级>>>el-input** ，必须是这样，否则没有效果

/* 利用穿透，设置input边框隐藏 */
      .inputDeep>>>.el-input__inner {
        border: 0;
      }
      /* 如果你的 el-input type 设置成textarea ，就要用这个了 */
      .inputDeep>>>.el-textarea__inner {
        border: 0;
        resize: none;/* 这个是去掉 textarea 下面拉伸的那个标志，如下图 */
      }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 2][]

才疏学浅，如有不足，欢迎指出 ，不胜感激 (•̀ᴗ•́)و ̑̑

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70]: /images/20221120/378daa6b589b4ac7b72f3902899c4df1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 1]: /images/20221120/b24c111999374fa2aae48b5d7bf674b6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 2]: /images/20221120/f7acbfa46b214dcf82e649835198fb17.png