element-plus修改输入框el-input样式去掉边框

已于 2023-08-12 08:48:08 修改
阅读量1.3k 收藏 1
点赞数 1
文章标签： vue.js javascript elementui
于 2023-08-11 16:40:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_49416650/article/details/132231641
版权

elementplus不提供样式API，用过深度选择器然并乱可能是没用对，只能基本操作写样式直接解决。

.el-input .el-input__wrapper{

  background: none;

  box-shadow: none;

}

producing
关注
Vue3 - Element Plus 下拉选择器 el-select 覆盖修改 placeholder样式，解决覆盖不生效问题（支持修改文字颜色、文字大小、选择器边框、hover效果、宽高等任意样式
王佳斌
03-23 3578
vue3，element-plus，el-select，下拉选择器，下拉选择框，Select选择器，deep覆盖无效怎么办，怎么修改placeholder文字颜色，选择器select修改边框样式，修改文字大小，elementPlus选择器如何覆盖hover效果，使用deep改不了样式，修改边框颜色，select去掉边框，vue3+elementPlus中select选择器如何修改placeholder文字样式，修改el-select样式，select选择器样式覆盖不了咋办，el-select如何覆盖原样式，
element plus中 input框的边框线去除并且鼠标滑过或点击选中都没有边框
weixin_44166849的博客
12-13 938
element plus中 input框的边框线去除并且鼠标滑过或点击选中都没有边框
elementuiPlus取消el-input的边框
最新发布
qq_39016177的博客
08-09 1654
elementuiPlus取消el-input的边框
element-plus el-input 删除边框 border
zzh122500的博客
01-30 8920
将box-shadow设置为none即可删除边框。
去除el-input 的边框：
qq_38210427的博客
04-21 804
vue element-plus中el-input修改边框border的方法_vue.js_脚本之家
elementPlus中input框去掉边缘线
m0_61848095的博客
10-24 547
important;
element el-input 去掉边框
热门推荐
Hero_rong的博客
11-19 3万+
element样式还是蛮好的，只是有时候我们需要做一些调整，比如，el-input 的边框，官网是这样子的 我们需要这样子的 然后我们常规操作，border: none;或者 border: 0; 发现行不通，哈哈哈哈哈 tip：将border属性设成0，虽然边框不见了，但是浏览器依然会对border-width和border-color进行渲染，会占用浏览器的资源。将border设置成none，浏览器就不会做出渲染动作。 然后就就，就发现个好东西，>>>， &g...
改变element-ui的input组件的(以边框为例)样式
m0_46364033的博客
07-09 8281
在vue项目中，不可避免的会用到element-ui这个组件库，也往往总需要改变一些组件的样式去和我们的项目相适应美观，很多组件都通过给一个class名再改变就可以了，！！！但是最近碰到需要改变Input输入框这个组件的边框颜色，找了n次的百度博客，都没有解决 先统一说一下曾经n次找到的百度博客表达的解决方式，总体来说就是，给你想改变样式的input一个class类名，然后给它我们自己想要的样式，最好复杂点，重点的是，不能在<style scoped></style>里面写，写了也
修改element-plus中input默认样式
05-11
要修改`element-plus`中`input`的默认样式，可以使用以下步骤： 1. 创建一个覆盖样式的CSS文件。 2. 在你的Vue项目中引入该CSS文件。 3. 在CSS文件中，使用`input`选择器覆盖`element-plus`中`input`的默认样式。 ...
element 输入框和文本域选中高亮
weixin_53575576的博客
10-27 3081
.el-input.is-active .el-input__inner, .el-textarea__inner:focus, .el-input__inner:focus { border-color: #ffffff; } 输入框 文本域
深度选择器修改element-plus组件样式
04-02
要修改element-plus组件样式，您可以使用深度选择器。深度选择器是指在样式选择器前加上“/deep/”或“::v-deep”来强制样式穿透到子组件中，并修改其样式。 例如，如果您想要修改el-input组件的输入框边框颜色，则...
elementUI去＜el-input＞边框
m0_60540878的博客
08-25 9085
1、第一种方法： <style> /* 三种方法选择自己喜欢的一个即可 */ /* .el-input--prefix .el-input__inner{ border: none; } */ /* .el-input--small .el-input__inner { border: none; } */ .el-input__inner{ border: none; } </style> 缺点是style不能加scoped，这就改成了全局样式。 2、第二
element-plus input 边框如何去除 以及 ifname HTML 内联框架元素
SzsxXy的博客
12-12 2065
以上就是今天要讲的内容，本文仅仅简单介绍了去除边框的使用，而element-plus提供了大量能使我们快速便捷地开发的组件，实现我们所需的功能。
el-input和el-select去掉边框
qq_34631220的博客
07-08 792
【代码】el-input和el-select去掉边框。
vue3+elementplus去掉el-input 和 el-textarea的border
li222248的博客
12-30 2061
【代码】elementplus去掉el-textarea 和 el-textarea的border。
elment-ui改变el-input框的样式（去掉边框）
HD243608836的博客
01-10 2402
el-input v-model="username" placeholder="请输入用户名" class="pass_input" >是el-input的input的css类名。
Element UI 中 el-input 标签去掉边框、背景透明的一种办法
hantanxin的专栏
07-06 2250
/deep/ .el-input__inner { border: none; background-color: rgba(255, 255, 255, 0); }
element-plus修改el-input边框颜色
07-27
要修改element-plus的el-input边框颜色，可以使用以下方法： 方法1：直接在el-input上添加class，并在样式中设置边框颜色。例如： ```html <el-input class="custom-input" v-model="inputValue"></el-input> ``` ```css .custom-input .el-input__inner { border-color: red; } ``` 方法2：使用:deep伪类选择器来修改el-input的边框颜色。例如： ```html <el-input class="custom-input" v-model="inputValue"></el-input> ``` ```css .custom-input :deep(.el-input__inner) { border-color: red; } ``` 方法3：使用全局样式修改el-input的边框颜色。例如： ```css .el-input__inner { border-color: red !important; } ``` 以上是三种修改element-plus el-input边框颜色的方法，你可以根据需要选择其中一种方法进行修改。 #### 引用[.reference_title] - *1* *2* *3* [element-plus el-input 修改边框 border](https://blog.csdn.net/qq_33592641/article/details/125093160)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值