el-input无边框
时间: 2023-11-23 13:06:47 浏览: 72
可以通过以下两种方法去除el-input的边框:
1. 在el-input标签上添加class属性,并在样式表中设置该class的样式,如下所示:
```html
<el-input v-model="input" class="borderNone" placeholder="此处展示结果"></el-input>
```
```css
.borderNone .el-input__inner {
border: none;
}
```
2. 直接在el-input标签上使用inline样式,如下所示:
```html
<el-input v-model="input" style="border:none;" placeholder="此处展示结果"></el-input>
```
相关问题
el-input 无边框
要使 el-input 无边框,你可以使用以下 CSS 样式来覆盖默认的边框样式:
```css
.el-input__inner {
border: none;
}
```
这样就能让 el-input 不显示边框了。你可以将这段 CSS 样式应用到你的项目中的 el-input 组件上,或者使用 scoped CSS 将样式限制在特定组件中。
el-scrollbar里有el-input和el-tree 如何让scrollbar在el-input下
在el-scrollbar中同时包含el-input和el-tree,并让scrollbar在el-input下,你需要将el-input和el-tree分别放在el-scrollbar内的不同子元素中。然后将el-input的样式设置为fixed,这样它就会脱离文档流,不会影响其他元素的位置。接着设置el-tree的样式为绝对定位(position:absolute),并将其top设置为el-input的高度,这样就能够让scrollbar显示在el-input的下方。
以下是实现的步骤:
1. 将el-input和el-tree分别放在el-scrollbar内的不同子元素中:
```html
<el-scrollbar>
<div class="input-container">
<el-input placeholder="请输入内容"></el-input>
</div>
<div class="tree-container">
<el-tree :data="treeData"></el-tree>
</div>
</el-scrollbar>
```
2. 设置el-input的样式为fixed:
```css
.input-container {
position: fixed;
top: 0;
left: 0;
right: 0;
}
```
3. 设置el-tree的样式为绝对定位,并将其top设置为el-input的高度:
```css
.tree-container {
position: absolute;
top: 40px; /* 这里假设el-input的高度为40px */
left: 0;
right: 0;
bottom: 0;
}
```
阅读全文