vue ElementUI中修改el-input__inner样式不同版本修改样式不生效

最新推荐文章于 2023-11-20 19:38:38 发布
最新推荐文章于 2023-11-20 19:38:38 发布
阅读量1k 收藏
点赞数
文章标签： vue.js elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ranmoli/article/details/129933698
版权

最近遇到一个比较少见的bug  el-input样式修改之后  在个别浏览器和电脑上显示效果不同，仔细看控制台发现 标签结构不同

正常结构是：

 不能正常显示样式的标签结构是：

 为了兼容两种格式的标签 样式修改成功，代码上做一些调整

相同的样式，不同的类名，兼容两种情况 

冉茉莉
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-limit-input-group：vue联合输入限制控件el-input-number增强
03-02
分组预设，预设控制组件简述limit-input-number基于element-ui的el-input-number控件基础改造，所以本组件依赖element-ui limit-input-number可直接替换el-input-number安装yarn add vue-limit-input-group 或者npm ...
如何修改elementui组件的样式，以及修改的样式不生效问题
lingliu0824的博客
08-04 1万+
修改elementui组件样式的方法有： 1.根据组件的属性传入相应的样式或者属性值来改变样式（具体属性参考官网）： 如：可以通过:header-cell-style来设置表头单元格的样式，:rowStyle来设置表格每一行的样式 2.通过class 2.1 通过以下方式来改变el-table标签下的表格偶数行的样式。 注意：这个样式必须是全局的才会生效，即style标签不能加scoped,为了避免组件内的其他样式也成为全局样式，可以新建一个style标签放这些组件样式，其他的样式仍然放在style s
el-input__inner样式不生效问题
github_39333092的博客
04-27 6424
方法1 父组件的 scoped 样式不能穿透到子组件上。 使用 /deep/ 或者 >>> 解决 /deep/.el-input__inner { color: black; } 方法2 在vue中，把style的scoped去掉就可以了。跟作用域有关 但这种方法不可取，把scoped去掉，其他页面的有这个类的话，也会跟着改。 方法3 重新定义一个类名，然后再写样式 .inputColorBlack{ .el-input__inner { color: black;
使用input.el-input__inner来定位，这样有什么好处
qq_44911571的博客
11-08 671
这样的选择器是具体和精确的，它不会选择到其他标签类型的 .el-input__inner 类，或者是其他类的 标签。在上下文中，使用 input.el-input__inner 是为了确保我们选择的是输入框元素，并且这些输入框具有特定的类名，从而更精确地定位到页面上的特定输入框。：有时候同一个类名在不同的标签上都有使用，通过指定 input 标签，可以避免选择到非 元素的 .el-input__inner 类，从而减少选择器的歧义性。1、input 是一个标签选择器，它选择所有的 元素。
el-input样式修改，边框，提示文字
weixin_38345306的博客
12-01 2808
el-input样式修改，边框，提示文字
笔记-ElementUI中修改el-input__inner样式不生效问题
热门推荐
Mo’的博客
09-07 1万+
在Vue中，style要求scoped，只修改本组件下的样式，使用>>>和/deep/来选择子组件 记录一下自己在需要table中使用input，而不出现边框，显然是border: 0;就可以的 使用了各种 .el-input .el-input__inner{ border:0;} 不生效 … 就是定位不到el-input__inner中 看了资料才知道，用>>>和/deep/ 我用/deep/.el-input__inner{border:0;}就解决了 ...
el-select，el-input__inner，el-input__suffix样式修改
imkaifan的博客
03-11 7662
上图： 项目：vue + element 问题：element虽好，但是样式修改起来是真的费劲。 总结：el-select的宽度是默认充满容器的所以只需要设置高度即可 css样式： //对整个容器进行设置 .el-select /deep/ .el-input__inner { height: 44px; border: none; margin-top: 24.5px; font-size: 18px; font-family: Source Han Sans
Vue_ElementUI-ING-2021_01:Vue＆ElementUI
03-08
Vue_ElementUI 1_vue简介 2_第1个vue应用程序 3_vue实例对象和生命周期 4_vue生命周期 5_vue模板 6_计算属性 7_v-for渲染 8_摘要更新检测 9_条件渲染 10_事件处理 11_事件对象 12_表单处理 13_实战练习1 14_实战...
vue:el-input输入时限制输入的类型操作
10-15
主要介绍了vue:el-input输入时限制输入的类型操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
改变el-input框的样式（去掉边框），及scoped实现原理
weixin_52862941的博客
12-02 5911
当一个style标签拥有scoped属性时候，它的css样式只能用于当前的Vue组件，可以使组件的样式不相互污染。如果一个项目的所有style标签都加上了scoped属性，相当于实现了样式的模块化。
vue修改el-input样式，样式穿透
大哈在此。。。
01-11 6274
vue修改el-input样式，样式穿透
element 修改样式不生效解决方法
xuelong的博客
08-15 756
有时候element-ui样式达不到预期，就需要修改样式，但是使用了很多修改方法都没有效果。要修改的样式，修改为’font-size: 12px’使用’deep’来覆盖，无效，
ElementUI中修改el-input__inner等标签样式不生效问题
weixin_38146633的博客
01-07 2166
谷歌浏览器在项目界面直接按F12，查看哪个样式在起作用，在Vue项目里重写对应的css样式,加上自己定义的class,例如下图的.loginInput，使其只在本组件中起作用。否则会在项目里其他使用相同样式的内容中起作用。若是仍然不行就加上 ！importment。 参考： https://my.oschina.net/yxmBetter/blog/1506668 https://www.cnblogs.com/loveliang/p/13852742.html https://blog.csdn.net
vue---el-input样式覆盖
maidu_xbd的博客
04-04 1万+
input输入框定义如下 <el-input id="dialog_input" style="margin-left:20px;" class="dialog-input-text" type="input" autosize v-model="dialogInput" ref="dialogInput" >...
el-input等输入框自定义边框
最新发布
m0_70542915的博客
11-20 836
写大屏总是有很多需要自定义的样式，使用element-plus中的输入框、日期选择框等组件的时候需要调整与大屏同系列颜色，遇到输入框调整边框颜色的时候有个边框怎么设置都去不掉。F12一次次调试，一层一层的修改border的值都没有用。最后终于走出border的狭隘视角。忽略了这么一个属性，最后才调整成功。
《已解决》el-input自动填充时输入内容存在阴影
weixin_45928161的博客
06-04 1273
解决el-input自动填充时出现的样式效果
el-input 只展示下划线
m0_55258023的博客
10-20 3136
el-input 只展示下划线
el-input的一些奇奇怪怪的问题
雩风季白的博客
11-17 332
1、type为number时，切换为中文输入法输入会让光标上移。2、input禁止输入特殊符号。
.el-slider__runway.show-input修改不生效
09-16
很抱歉，我不知道你想修改的是什么东西。如果你能提供更多的信息，我将尽力帮助你。 有几种可能的原因导致你修改的样式不生效： 1. 你修改的样式被其他样式覆盖了。在检查你的样式之前，确保没有其他样式影响到了你想要修改的元素。 2. 你的样式表中有语法错误。检查你的样式表，确保没有语法错误。 3. 你修改的样式被浏览器的缓存所覆盖。尝试清除浏览器的缓存，然后再次检查你的样式是否生效。 4. 你的样式并没有正确地加载。确保你的样式表已经正确地链接到了你的HTML文档中。 希望这些建议能帮到你。如果你能提供更多的信息，我将尽力给出更具体的帮助。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值