如何修改element-ui中输入框点击之后的边框高亮

最新推荐文章于 2024-04-22 17:03:24 发布
最新推荐文章于 2024-04-22 17:03:24 发布
阅读量4.5k 收藏 5
点赞数 6
文章标签： elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dhydynl/article/details/113988743
版权

做项目根据ui图设计需要修改输入框的点击之后边框的高亮颜色 原本的颜色是蓝色的
后来不停的点在F12中终于找到
.nm-skin-pretty .el-input.is-active .el-input__inner,
.nm-skin-pretty .el-input__inner:focus {
border-color: red;
}
在这里插入图片描述
因为修改element-ui中的原有属性需要去除scoped，所以最好给input一个类名否则会在其它页面生效

dhydynl
关注
  • 6
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element 动态使用rules控制输入框的边框效果（红色）
轻风细雨_林木木
03-25 5618
前言： 今天做了一个变态的效果，其实很简单但是要达到动态修改就麻烦了 目标： 登录页面进入以后满足基本验证的前提下； 调用后台接口错误之后要求input框边变红 重新修改input内容时，所有验证消失 很简单吧……，但是实际实现就很操蛋了，提醒千万不要源JS修改，后果自己体验。 实现逻辑和步骤： // 1. 隐藏所有提示语 <el-form :show-message="false" /...
element 输入框和文本域选中高亮
weixin_53575576的博客
10-27 2932
.el-input.is-active .el-input__inner, .el-textarea__inner:focus, .el-input__inner:focus { border-color: #ffffff; } 输入框 文本域
element ui的单选框更改点击后的颜色（单选框的fill属性失效）
华唐的博客
12-13 5712
关于在element ui的单选框更改点击后的颜色的css 或者scss实现，主要的原因是小哥我今天在使用element UI的时候，发现单选框的那个fill属性没有效果，这让我很郁闷，由于之前的全局样式是定义了紫色，但是UI设计的网页在点击后是绿色，这就需要自己抛开fill属性，自己原生css写样式。 主要的解决思路 1.在element UI中所使用的的组件最后在生成网页的时候是会自动生成很多...
el-input组件当数据为空时， 边框变红，并提示错误信息
wlijun_0808的博客
03-01 1017
el-input组件当数据为空时， 边框变红，并提示错误信息 先设置输入框变红的样式以及提示文字的样式class。对于样式class 用变量来控制是否奏效。主要是使用动态类的方式。
element UI 将表格变成红色
qq_41648113的博客
10-28 1589
将表格变为红色，效果如下图 html代码 <template> <div> <el-table :data="tableData" border :cell-style="cellStyle" style="width: 100%; margin-top: 20px"> <el-table-column prop="name"
vue 设置 el-input 输入时边框及光标颜色
且听风吟的博客
06-17 7639
vue 设置 el-input 输入时边框及光标颜色
element plus 表格,单元格颜色,边框设置
qq_44871531的博客
02-04 2250
element plus 表格,单元格颜色,边框设置
Element-plus的el-input改边框focus后颜色
M31Gargantua的博客
09-16 3900
Element-plus的el-input改边框focus后颜色
Firefox下el-input出现红框
cfy1030349388的博客
07-13 511
input框在火狐浏览器中边红
element input修改输入边框
qq_43654065的博客
09-28 1835
【代码】element input修改输入边框。
详解element-ui表格中勾选checkbox，高亮当前行
10-16
主要介绍了详解element-ui表格中勾选checkbox，高亮当前行，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
element-ui中dialog弹窗关闭按钮失效的解决
10-14
主要介绍了element-ui中dialog弹窗关闭按钮失效的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue element-ui实现input输入框金额数字添加千分位
10-15
主要介绍了vue element-ui实现input输入框金额数字添加千分位,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
element-ui.rar element-ui核心库压缩包
12-20
element-ui.rar element-ui核心库压缩包
时间默认显示当前日期及系统时间
qq_24441205的博客
04-22 206
在这个示例中，我们将 xtdsSj 初始化为空字符串，然后在组件创建时调用 updateXtdsSj 方法来更新它。updateXtdsSj 方法获取当前日期及系统时间，并使用 formatDateTime 方法将其格式化为字符串，最后将格式化后的日期时间赋值给 xtdsSj。要将 xtdsSj 绑定到当前日期和系统时间，你可以在组件的 data 中初始化 xtdsSj 属性为当前日期及系统时间的字符串。然后，在组件创建时更新 xtdsSj，确保它始终显示当前日期和系统时间。
el-table 表格从下往上滚动，触底自动请求新数据
细节怪的博客
04-19 365
el-table 实现表格从下往上滚动，触底自动请求新数据；鼠标移入区域停止滚动，移出继续滚动。
隐藏表头和最高层级的复选框
最新发布
qq_43730272的博客
04-22 293
【代码】隐藏表头和最高层级的复选框。
vue 注册自定义指令，对输入框输入内容过滤（区分中英文）
来一颗砂糖橘
04-19 197
注册vue全局指令对el-input输入框进行最大长度过滤（区分中英文）过滤空格。
element-ui表单输入框邮箱校验
11-21
以下是使用element-ui表单组件进行邮箱校验的示例代码： ```html <template> <el-form ref="form" :model="form" :rules="rules"> <el-form-item label="邮箱" prop="email"> <el-input v-model="form.email"></el-input> </el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form> </template> <script> export default { data() { return { form: { email: '' }, rules: { email: [ { required: true, message: '请输入邮箱', trigger: 'blur' }, { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] } ] } } }, methods: { submitForm() { this.$refs.form.validate(valid => { if (valid) { // 通过了验证 console.log('验证通过') } else { // 验证失败 console.log('验证失败') } }) } } } </script> ``` 在上述代码中，我们使用了element-ui的表单组件，其中el-form表示整个表单，el-form-item表示表单项，el-input表示输入框。我们给表单设置了model属性传入表单数据，给表单项设置prop属性，其值为设置为需校验的字段名。在rules属性中，我们设置了email字段的验证规则，包括必填和邮箱格式验证。最后，在submitForm方法中，我们使用了validate方法进行表单验证，如果验证通过，则输出“验证通过”，否则输出“验证失败”。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值