elementui——el-input取消边框

最新推荐文章于 2024-08-13 16:30:10 发布

real_xiaobai

最新推荐文章于 2024-08-13 16:30:10 发布

阅读量7.1k

点赞数 4

分类专栏： elementUI 文章标签： elementui css html

本文链接：https://blog.csdn.net/real_xiaobai/article/details/120549849

版权

elementUI 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

这篇博客内容涉及前端开发中，使用`el-form`组件来创建表单，并针对`el-input`元素进行样式定制，移除了边框，以实现更自定义的界面风格。适合前端开发者学习如何在项目中调整Element UI库的样式。

摘要由CSDN通过智能技术生成

<el-form :model="form" status-icon ref="form"  class="demo-ruleForm">
      <el-form-item label="报备内容">
        <el-input type="password"  autocomplete="off"></el-input>
      </el-form-item>
</el-form>

 .demo-ruleForm >>>.el-input__inner{
    border: 0;
  }

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

real_xiaobai

关注关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

超详细 ElementUI 源码分析 —— Input

前端学习博客

03-17

2591

最近在学习 Vue 框架，想深入了解一下组件化开发以及封装组件库的思想，而 ElementUI 作为这方面做的最好的也是最常用的组件库，它的源码一定有很多值得我们去学习的地方，所以去 ElementUI 官网和 Github（来都来了，给个 star）看了一下，决定边学习组件库边看源码，并把学习中的收获和疑问记录下来，预计会需要很长很长时间才能看完，但是为了提高自（gong）己（zi），还是静下...

一些问题——滚动条样式设置+elementUI中一些内部样式修改

weixin_58412143的博客

03-31

2079

::-webkit-scrollbar { width: 10px; /* 纵向滚动条*/ height: 5px; /* 横向滚动条 */ background-color: #fff; } /*定义滚动条轨道内阴影*/ ::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0, 0, 0, 0); background-color: #ccc; } //下面是ul的滑动条 /*定义滑块内阴影.

参与评论您还未登录，请先登录后发表或查看评论

elment-ui改变el-input框的样式（去掉边框）

HD243608836的博客

01-10

2360

el-input v-model="username" placeholder="请输入用户名" class="pass_input" >是el-input的input的css类名。

elementuiPlus取消el-input的边框

qq_39016177的博客

08-09

1068

elementuiPlus取消el-input的边框

element-plus 中自定义 el-input 的边框 border

虎康的博客

08-12

364

在 Element Plus 的 el-form 表单组件中，如果你想要去掉 el-input 组件的外边框，只保留下边框，可以通过 CSS 来实现。这通常涉及到修改 el-input 的默认样式。如图所示，自定义 el-input 的边框。

elementUI去＜el-input＞边框

m0_60540878的博客

08-25

9018

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、第二

清除el-input的边框

weixin_55737212的博客

03-05

986

【代码】清除el-input的边框。

element el-input 去掉边框

最新发布

布克吉的博客

08-13

488

* 登录模块 */})//标识表单//正则验证规则} else {callback()callback()} else {callback()} else {callback()}],}],}]})

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理（商品列表）

weixin_48884617的博客

04-19

8545

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理（商品列表）

el-input和el-select去掉边框

qq_34631220的博客

07-08

694

【代码】el-input和el-select去掉边框。

element-ui el-input 删除边框

bradyM的博客

04-06

4336

element-ui el-input 删除边框

除去elementuiUI中表单上的el-input的边框样式，并改为下换线

weixin_53077623的博客

04-25

1322

小菜鸡玩代码。

Element UI 中 el-input 标签去掉边框的一种办法

qq_37212806的博客

12-08

1万+

Element UI 的 el-input 标签去除边框的一种方式

如何去掉el-input自带边框

qq_38210427的博客

06-03

803

【代码】如何去掉el-input自带边框。

Element UI 中 el-input 标签去掉边框、背景透明的一种办法

hantanxin的专栏

07-06

2194

/deep/ .el-input__inner { border: none; background-color: rgba(255, 255, 255, 0); }

el-input-number如何不显示边框

07-14

对于`el-input-number`组件，要想不显示边框，可以通过自定义样式来实现。你可以使用`element-ui`提供的`class`属性，将自定义的样式类添加到`el-input-number`上，然后在该样式类中设置边框为透明或者隐藏。比如，你可以定义一个名为`no-border`的样式类，然后将它添加到`el-input-number`组件上，代码如下： ```html <el-input-number class="no-border"></el-input-number> ``` 然后在你的样式文件中，设置该样式类的边框为透明或者隐藏，代码如下： ```css .no-border .el-input-number__decrease, .no-border .el-input-number__increase, .no-border .el-input-number__input { border-color: transparent; } ``` 通过这种方式，你可以实现`el-input-number`不显示边框的效果。记得在你的项目中引入自定义样式文件，并将`no-border`样式类应用到`el-input-number`组件上。