el-input样式无法改变

最新推荐文章于 2024-05-17 08:13:37 发布
原创 最新推荐文章于 2024-05-17 08:13:37 发布 · 403 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #js #深度学习 #java

本文探讨了在前端开发中如何使用深度选择器`::v-deep`来穿透组件样式隔离，具体应用是在`.el-input.search-input`的内部，通过`::v-deep .el-input__inner`设置元素的高度和行高为30px，以此实现对Vue组件样式的精确定制。

 使用深度选择器     ::v-deep

.el-input.search-input{
    ::v-deep .el-input__inner{
    height: 30px;
    line-height: 30px;
    }
}
9.（vue3.x+vite）修改el-input,el-data-picker样式（deep实现）
地图之家
04-16 254
9.（vue3.x+vite）修改el-input,el-data-picker样式（deep实现）
9.（vue3.x+vite）修改el-input,el-data-picker样式
GIS之家家长
07-02 222
9.（vue3.x+vite）修改el-input,el-data-picker样式
el-input背景设置为透明色 elementUi Plus
weixin_42678822的博客
04-22 3552
【代码】el-input背景设置为透明色 elementUi Plus。
解决VUE中el-input的二次修改无效问题
qq_57373769的博客
05-17 618
原文链接：https://blog.youkuaiyun.com/Akatsuki233/article/details/95350817。原来是因为我的清空Form表单的方式不正确，好好好，给我改。我从网上查阅过多个解决方案，但是均无效。也不知道为啥有这样一个问题？
修改el-select或者el-input样式失效
lanmy_dl的博客
08-02 1672
因为在页面的时候我取消样勾选就满意黑色，所以以为设置的是none，结果代码里面设置none是白色，然后一直以为没有生效，当改成自己想要的颜色就可以了。可是一直不生效，最初看到说:popper-append-to-body="false"设置为false，没用。下午改el-input和el-select这两个的样式真的烦，，，还不如写原生标签了。，注意没有空格，然后按照所寻找的样式选择器放进来就可以了。我已经在样式器中挨着挨着去找了，把层级的类都写下来了。后面感觉就是样式穿透的问题，样式使用的是sass。
el-input__inner样式不生效问题
github_39333092的博客
04-27 7587
方法1 父组件的 scoped 样式不能穿透到子组件上。 使用 /deep/ 或者 >>> 解决 /deep/.el-input__inner { color: black; } 方法2 在vue中，把style的scoped去掉就可以了。跟作用域有关 但这种方法不可取，把scoped去掉，其他页面的有这个类的话，也会跟着改。 方法3 重新定义一个类名，然后再写样式 .inputColorBlack{ .el-input__inner { color: black;
el-table 里面嵌套el-input 数据改变了但是页面没有同步更新（全网最全）
weixin_44875212的博客
03-21 2113
el-table 里面嵌套el-input 数据改变了但是页面没有同步更新（全网最全）
Vue ElementUI el-input-number 改变控制按钮 icon 箭头为三角形
前端技术
04-11 1096
【代码】Vue ElementUI el-input-number 改变控制按钮 icon 箭头为三角形。
Vue框架开发Electron12 - 动态改变Element-Ui默认el-Input背景样式
qq_39388660的博客
09-09 6315
Element-ui是一个非常好的UI设计模块，它提供给我们很多好看的按钮样式，非常适用于快速搭建UI，下面说说如果使用了element-ui之后，要更改它默认的el-Input样式应该怎么操作。 使用调试工具找出他的样式默认表，具体操作如下： 从上图知道默认的样式是.el-input__inner,那下面在改成自己想要的颜色： <style > .el-input__i...
修改el-input样式
Yfw的博客
07-22 2万+
HTML代码： <el-input class="textarea" placeholder="请输入用户名" auto-complete="on"></el-input> css代码： <style > .textarea>>>.el-input__inner{ font-size: 18px!important; ...
element UI -- 默认样式修改不成功的问题
热门推荐
bobobocai的博客
08-20 3万+
有的时候element提供的默认的样式不能满足项目的需要，就需要我们队标签的样式进行修改，但是发现修改的样式不起作用 原因：scoped 解决方法：去掉scoped 注意：此时该样式会污染全局样式，可以把它放在公共的css里面 为了不让所有的 el-input标签都是该样式，可以在HTML给改input加上一个类名，比如 modInput ...
element中修改input样式失效的解决办法
Zheng_xinle的博客
06-28 2833
::v-deep 深度作用选择器 更改input框样式无效可以试试::v-deep ::v-deep .el-input__inner { background: transparent !important; border: none!important; border-radius: 0px!important; border-bottom: 1px solid #9FA6B3!important; } ...
笔记-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;}就解决了 ...
使用elementUI样式不改变 el-input样式不改变
egbertasd的博客
06-20 1396
使用elementUI样式不改变 最近在公司做项目使用elementUI发现样式不可随意的按照自己的需求改变，看了网上的做法也是不行 后来请教了公司同事，说是要用强权样式 具体解决问题如下 例如这个input边框 他的高度不可变 解决方法就是右键检查属相 找到对应样式类 更能该其css代码 更改如下 得到想要的样式后赋值css代码 ```css <style lang="css"> .el-input__inner { -webkit-appearance: none
修改webkit内核浏览器滚动条样式（修改element-ui table样式）
冰雪为融的博客
04-07 3698
webkit浏览器css设置滚动条主要有下面7个属性 1. ::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的 2. ::-webkit-scrollbar-button 滚动条两端的按钮 3. ::-webkit-scrollbar-track 外层轨道 4. ::-webkit-scrollbar-track-piece 内层滚动槽 5. ::-webkit-scrollbar-thumb 滚动的滑块 6. ::-webkit-scrollbar-corner 边..
vue加scoped后无法修改样式（无法修改element UI 样式）
boy火巨的博客
03-13 1万+
有的时候element提供的默认的样式不能满足项目的需要，就需要我们队标签的样式进行修改，但是发现修改的样式不起作用 第一种方法 原因：scoped 解决方法：去掉scoped 注意：此时该样式会污染全局样式，可以把它放在公共的css里面 为了不让所有的 el-input标签都是该样式，可以在HTML给改input加上一个类名，比如 modInput 第二种方法 这不去掉scop...
vue2.0 无法修改样式的解决方案
小石猴的博客
03-01 1661
vue2.0 v-html渲染的dom及引用ui框架无法修改样式的解决方案 vue2.0 中通过v-html渲染的dom以及引用ui框架会有无法修改样式的问题，通过我的查询实践找到了以下解决方案，希望可以帮助有需要的小伙伴。 1.v-html渲染的富文本，无法在样式表中修改样式 比如下面的代码，在style标签中定义了div.htmlBox里面的p标签的color样式，但是实际样式并未生效： ...
elementUI的input框textarea设置大小(以及禁止改变大小)
树上骑个猴的博客
08-16 2万+
:默认rows=" 2 " 此外设置 resize=“none” 可以禁止改变大小 改变数值即可改变textarea大小 <el-form-item label="备注" prop="desc"> <el-input type="textarea" :rows="12" v-model="ruleForm.desc" height=200px></el-input> </el-form-item> ...
改变某个el-input的高度，不涉及到其它的el-input
最新发布
09-17
<think> 我们需要修改特定的el-input组件的高度，而不影响其他el-input。可以通过给目标el-input添加自定义类名，然后通过该类名来覆盖样式，避免全局影响。 解决方案： 1. 在目标el-input上添加自定义class，例如"custom-height" 2. 在样式中使用该类名来限定作用范围，并穿透到子元素（因为el-input__inner是子组件的元素） 示例代码： ```vue <template> <!-- 普通输入框，不受影响 --> <el-input v-model="input1" placeholder="普通高度"></el-input> <!-- 需要自定义高度的输入框 --> <el-input class="custom-height" v-model="input2" placeholder="自定义高度"></el-input> </template> <style scoped> /* Vue3语法 */ .custom-height :deep(.el-input__inner) { height: 60px; line-height: 60px; } /* 如果是Vue2，可以这样写 */ /* .custom-height >>> .el-input__inner { height: 60px; line-height: 60px; } */ </style> ``` 注意：如果使用Vue2，深度选择器的语法不同（使用>>>或/deep/）。另外，记得调整行高（line-height）以保持文本垂直居中。 这样，只有添加了"custom-height"类的el-input才会改变高度。 §§相关问题§§ 1. 如何只改变特定el-input的字体颜色而不影响其他？ 2. 在Element UI中，如何为不同的el-input设置不同的图标？ 3. 如何根据条件动态改变el-input的高度？ 4. Vue3中使用深度选择器覆盖组件样式时有哪些注意事项？ </think> ### 针对性修改单个 `el-input` 高度的方法 当需要仅修改特定 `el-input` 的高度而不影响其他输入框时，可通过以下方案实现： #### 解决方案： 1. **添加自定义类名** 为目标输入框添加唯一类名标识： ```vue <el-input class="custom-height-input" v-model="value"></el-input> ``` 2. **精确作用域样式** 使用 CSS 层级限制作用范围： ```css /* Vue3 深度选择器 + 自定义类名 */ .custom-height-input :deep(.el-input__inner) { height: 60px; line-height: 60px; /* 保持垂直居中 */ } /* Vue2 语法 */ .custom-height-input >>> .el-input__inner { height: 60px; } ``` 3. **行内样式（动态场景）** 配合 `:style` 绑定实现动态高度： ```vue <el-input :style="{ '--input-height': '80px', '--line-height': '80px' }" class="dynamic-height" ></el-input> ``` ```css .dynamic-height :deep(.el-input__inner) { height: var(--input-height); line-height: var(--line-height); } ``` #### 注意事项： - ✅ 必须同时设置 `height` 和 `line-height` 避免文字错位 - ✅ 深度选择器确保穿透 Element UI 组件样式隔离 - ❌ 避免全局修改 `.el-input__inner` 影响所有输入框 - ⚠️ 多行文本框需单独处理 `.el-textarea__inner` #### 完整示例： ```vue <template> <!-- 普通输入框 --> <el-input v-model="normalInput" placeholder="标准高度" /> <!-- 自定义高度输入框 --> <el-input class="tall-input" v-model="customInput" placeholder="自定义高度(80px)" /> </template> <style scoped> /* 仅作用于.tall-input对应的输入框 */ .tall-input :deep(.el-input__inner) { height: 80px; line-height: 80px; padding: 0 20px; font-size: 18px; } </style> ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

风花一世月

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值