elementUi中的el-select/el-input去掉border边框

在开发过程中遇到需要去掉 el-input的边框,
这是element ui 官方文档的样式

而我们的需求是

不可行做法

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

通过实践，border: none; 或者 border: 0; 都行不通，即以下方法并不可行：
通过选择 el-input

elementUi中的el-input去掉border边框在开发过程中遇到需要去掉 el-input的边框，使其满足ui要求，element-ui官网的el-input的样子如下：elementUi中的el-input去掉border边框但是我需要的是下面这种没有边框的效果：elementUi中的el-input去掉border边框不可行做法
例如这样一段代码来设置<div class="inputDemo"><el-input></el-input>
</div>
通过实践，border: none; 或者 border: 0; 都行不通，即以下方法并不可行：通过选择 el-input
.inputDemo el-input{border: none;
}

.inputDemo el-input{border: 0;
}

通过选择 input

.inputDemo input{border: none;
}

.inputDemo input{border: 0;
}

以上方法中，通过选中 .el-input__inner也不可行

在el-input组件中，是通过 .el-input__inner来设置边框的
解决办法

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

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

写法请遵循：父级>>>el-input
例子

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

css实现

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

本文链接：https://www.beiwangshan.com/archives/106.html

elementUi中的el-select/el-input去掉border边框相关推荐

elementUi中的el-input去掉border边框
https://www.beiwangshan.com/archives/106.html
el select 清空_解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
这是一个项目中常见的需求,el-select 为下拉多选,默认值不可删除,或者指定值不可删除. 实现效果: el-select 如下源码中 tag closable 属性为 el-select 的 d ...
elementUI中input的使用
elementUI中input的使用 <template><div style="padding:20px;"><el-card><!-- ...
【杂记】（input获取焦点失去焦点、获取input中输入的值、键盘事件、js事件、Math 属性、手机自适应meta定义、去掉input内置阴影、图片居中、去蓝色默认背景、点击去掉默认边框）
1. input获取焦点失去焦点 input:focus{border:1px red solid:} 获取焦点 .focus()失去焦点.blur() 2. 获取input中输入的值 <inp ...
在javascript中使用el表达式(jsp中的javascript中支持写el表达式，毋庸置疑，单独的js文件中不支持写el表达式，别钻牛角尖)
哎,够背的,最后4张图怎么调整都很小,看不清楚,所以大家还是看我这篇文章吧在javascript中使用el表达式(图片清晰版,有图有真相),这篇文章的图片可以正常看清楚,跟我这篇文章是一样的内容! 有 ...
html5下拉列表默认值,element-ui中的select下拉列表设置默认值方法_简单_前端开发者...
element-ui中的select下拉列表如何设置默认值? 在element-ui的运用中,涉及到了select下拉列表.项目中需要将select的默认值给展示出来那如何修改呢? 上element ...
JSP2.0中的表达式语言(EL表达式)
转载自 JSP2.0中的表达式语言(EL表达式) EL语法 EL的语法很简单,他最大的特点就是使用上很方便例: ${sessionScope.user.sex} 所有EL都是以${ 为起始 ...
vue与elementUI中给el-input绑定键盘按键--按键修饰符
vue怎么写键盘事件 vue允许将按键值作为修饰符来使用,如监听回车事件,有两种写法,如下代码: <input type="text" @keyup.13="con ...
Vue+EleMentUI实现el-table-colum表格select下拉框可编辑
说明: 在进行采购入库的过程中,有必要对表格中的一行进行快速编辑保存,节省时间,提高工作效率!,而不是每次编辑都要弹窗才可编辑源码:https://gitee.com/charlinchenlin/ ...

elementUi中的el-select/el-input去掉border边框

elementUi中的el-select/el-input去掉border边框相关推荐

最新文章

热门文章