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

最新推荐文章于 2024-07-27 14:53:45 发布
最新推荐文章于 2024-07-27 14:53:45 发布
阅读量4.8k 收藏 6
点赞数 7
文章标签： elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dhydynl/article/details/113988743
版权
本文介绍了如何根据UI设计修改Element-UI库中输入框点击后的边框高亮颜色。通过F12开发者工具定位到相应的CSS样式，并移除`scoped`属性以全局生效。同时建议为输入框添加特定类名，以防影响其他页面样式。这是一个前端开发中常见的样式调整问题。
摘要由CSDN通过智能技术生成

做项目根据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
关注
  • 7
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element 输入框和文本域选中高亮
weixin_53575576的博客
10-27 3045
.el-input.is-active .el-input__inner, .el-textarea__inner:focus, .el-input__inner:focus { border-color: #ffffff; } 输入框 文本域
【elementUI样式】实现 element-ui el-input 组件获得焦点后边框样式修改
qq_34695703的博客
09-04 1万+
【实现效果】获得焦点后 el-input 边框高亮 【问题】 之前常用 :focus 处理 input 获得焦点后样式的修改，但是 elementui 中要修改的其实并不是 input 标签的样式，而是封装的一个 el-input 组件，其实是一个 div，需要实现 el-input 组件中的 input 获得焦点后，修改最外层 div 的样式，仍用 :focus 是没法修改的 【解决】...
el-input当输入内容不合法时，更改输入框颜色或文字颜色
最新发布
秋思的博客
07-27 412
根据需求，当用户输入内容不合法时，通过更改文字颜色或者更改输入框颜色，提示用户。上述代码中：输入内容，输入框变为红色，文字为黄色。
UI自动化高亮元素与截图
xie_0723的博客
03-20 1610
做UI自动化时，写了2个方法,方便:清晰辨识定位的元素and 保留定位证据，与大家分享下。from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.support.wait import WebDriverWait from functools import w
vue 设置 el-input 输入时边框及光标颜色
且听风吟的博客
06-17 8176
vue 设置 el-input 输入时边框及光标颜色
element plus 表格,单元格颜色,边框设置
qq_44871531的博客
02-04 2646
element plus 表格,单元格颜色,边框设置
脱离form表单校验input（校验单个input输入框）提交时边框变红
Z_Gleng的博客
11-21 1194
在你提交事件中加上校验方法(根据场景加对应的的方法，我这里是点击事件后出发)，通过document获取到目标元素改变他的边框。当输入内容是需要红色边框，加个input事件内容改变就还原边框颜色。
element-ui 删除input框尾部默认图标和获取焦点边框高亮问题
weixin_45842954的博客
05-20 3145
我们引用element-ui的input框时，尾部默认会携带图标 我们可以把它去除，利用f12审查元素发 该图标为一个标签 类名为 .el-input__validateIcon，把它设置为display:none 就可以去除了，直接给该标签设置发现不起效果，那么找到它的父级标签，增加权重的，这是设置在公共样式里面 .el-form-item--feedback { .el-input__validateIcon { display: none; } } 获取焦点时边框默认蓝色高亮 输入
黑马程序员课程-Vue项目实战-Element-UI——电商后台管理系统-用户列表制作
weixin_48884617的博客
03-27 6210
黑马程序员课程-Vue项目实战-Element-UI——电商后台管理系统--用户列表制作
Vue2 + element-ui后台管理项目—用户管理
m0_53156934的博客
12-09 1256
利用button按钮里的图标按钮给操作列添加三个按钮，先定义作用域插槽，再添加修改 删除 分配角色按钮，将按钮的size属性设置为mini，操作这一列宽度不够，直接行内设置一下。在API接口文档里状态数据是一个布尔值，无法显示在页面上，因此需要改造一下，当布尔值是true的时候开关为打开状态，布尔值为false时开关为关闭状态，此时需要定义作用域插槽。渲染使用table表格组件，先在ui结构区域开辟用户列表区域，创建一个表格和一行，再将table和tablecolumn进行按需导入并注册为全局组件。
iview Input组件聚焦时会出现边框（去除边框CSS）
日常笔记/总结/系列知识梳理
09-26 3600
去除边框CSS .ivu-input:focus{ outline:none; border:none; box-shadow: 0 0 0 2px transparent; }
必须为数字且不能为负数
05-07
js 处理输入数字的问题:只是输入时0-9的有效数字 且不能使数字。
Firefox下el-input出现红框
cfy1030349388的博客
07-13 577
input框在火狐浏览器中边红
去掉input点击效果的边框、改变边框颜色
weixin_40030173的博客
05-12 2362
去掉input点击效果的边框 input:focus{ border-color:#009158; outline: none; }
踩坑记21 div 固定宽高比 padding-bottom | style scoped 时 :deep(.el-input__inner:focus) | javaScript 八进制
Alloom的博客
09-07 620
2021.9.7 坑67（div、css、固定宽高比）：目标是使div元素在缩放时宽高比固定。因为垂直方向上的内外边距使用百分比做单位时，是基于包含块的宽度来计算的。所以使用padding-bottom实现宽高比固定的元素块。 实现：divBox实现固定宽高比，divContent则为其中内容，实现内容定位。 .divBox { /* 相对位置，定位基于该元素原先位置 */ position: relative; /* 宽:高=4:3 */ width: 40%; heigh...
项目笔记--点击input或者textarea时改变边框颜色
qq_43456830的博客
06-14 4700
##项目笔记–点击input或者textarea时改变边框颜色 outline-color:#59ACFF(加你想要得颜色就行！);
el-input textarea 内部文字标红
qq_45780380的博客
09-26 2789
el-input input textarea 内部文字标红 在chrome中，input、textarea中英文单词的红色波浪线是浏览器默认开启了语法检查导致的。 只需要在textarea或者input中添加属性spellcheck=“false” 即可去除该波浪线： <textarea spellcheck="false" autocomplete="off" autocapitalize="off" autocorrect="off"></textarea> ...
【elementplus】el-input修改文字、背景、边框颜色样式
热门推荐
Zhang_YingJie的博客
07-28 2万+
element-plus el-input修改默认样式
elemenUI---改变部分组件样式：如 表格操作＞鼠标移入高亮当前行、选中当前行样式改变，数字输入框，滚动条等
weixin_43111269的博客
09-09 1450
elemenUI---改变部分组件样式：如 表格操作>鼠标移入高亮当前行、选中当前行样式改变，数字输入框，滚动条操作等
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、付费专栏及课程。

余额充值