element-ui 删除input框尾部默认图标和获取焦点边框高亮问题

我们引用element-ui的input框时，尾部默认会携带图标

我们可以把它去除，利用f12审查元素发该图标为一个标签类名为 .el-input__validateIcon，把它设置为display:none 就可以去除了，直接给该标签设置发现不起效果，那么找到它的父级标签，增加权重的，这是设置在公共样式里面

.el-form-item--feedback {.el-input__validateIcon {display: none;}
}

获取焦点时边框默认蓝色高亮

输入框获取焦点是会出现蓝色高亮边框，给 input 设置 outline: none ,发现没有效果，通过f12发现，input默认设置了获取焦点和鼠标移入是都会切换高亮，以为是一种解决方案
把三种情况都设置一样的边框颜色，那么就相当于没有切换高亮了

.el-input__inner:focus {border-color: #dcdfe6 !important;
}
//边框本身的颜色
.el-input__inner {border: 1px solid #dcdfe6;
}
.el-input__inner:hover {border-color: #dcdfe6;
}

验证失败时默认会出现红色高亮边框

取消验证失败是红色高亮，可以找到error是的类名，设置与原来的边框一样的颜色

.el-form-item.is-error {.el-input__inner {border-color: #dcdfe6 !important;}
}

element-ui 删除input框尾部默认图标和获取焦点边框高亮问题相关推荐

layui 表单动态添加、删除input框
html部分 <div class="layui-form-item" ><label class="layui-form-label"> ...
easyui前端实现多选框_前端：Element UI 多选框组用法笔记
今天给大家分享一下Element UI 多选框组用法笔记,直接上代码! "兴趣爱好:"> "form.checkList"> for= {{item ...
php动态删除输入框,jQuery实现动态添加和删除input框实例代码
本文实例为大家分享了jQuery实现动态添加和删除input框的具体代码,供大家参考,具体内容如下选项 $(function(){ // 添加选项 $("#opbtn").cli ...
前端：Element UI 多选框组用法笔记
今天给大家分享一下Element UI 多选框组用法笔记,直接上代码! <html><head></head><body><el-form> ...
Element UI 自定义穿梭框的数据项
文章目录需求官网说明实现效果具体步骤附加需求:调节穿梭框高宽度需求穿梭框中显示的内容是包含多个字段的数据(把表格的几个字段在穿梭框中展示)以及修改相应的样式,查看 Element UI ...
element ui中穿梭框等列表文字显示过长隐藏问题处理
主要记录一下element ui组件中穿梭框.table列表内容显示不全解决方式对于Transfer 穿梭框中的文字过长隐藏问题处理: 1.实现效果: 解决方式; 1. <el-row :gu ...
【Element UI】日期选择器el-date-picker 默认选中当前日期==＞不可选当日之前的日期
一个人能否合理表达自己的攻击性是健康与否的重要标准. 参考Element UI Element - The world's most popular Vue UI framework 目录 1.默认 ...
vue下拉框值改变事件_vue和element ui 下拉框select的change事件
1 在线编辑测试工具编辑好代码后点击 run 即可 2 vue原生写法 2.1 html部分新增空 {{ drug.name }} 刪除尚未新增任何資料總金額:{{ totalMoney } ...
修改element ui tree 搜索功能，实现分级搜索，关键字高亮
element ui 里面的tree 自带的搜索功能是默认搜索的全部数据,有关键字的显示,没有的不显示需求: 在element UI tree 原有功能不变的情况下新加 1)搜索 tree 时,如果 ...
Input 框中的 placeholder 属性获取焦点清空
本人在开发一个微信小程序时,遇到如下问题: input 框获取了焦点,但是 placeholder 属性的值却仍然还在,必须输入任意数据后,该值才会隐藏,这会给用户一种不好的体验效果. 理想效果应为: ...

element-ui 删除input框尾部默认图标和获取焦点边框高亮问题

获取焦点时边框默认蓝色高亮

验证失败时默认会出现红色高亮边框

element-ui 删除input框尾部默认图标和获取焦点边框高亮问题相关推荐

最新文章

热门文章