el-input设置边框
时间: 2023-11-08 21:00:00 浏览: 54
el可以通过设置样式来设置边框。你可以使用id选择器或其他选择器来选择要设置样式的输入框。然后,在该选择器中,你可以使用CSS属性来定义边框样式。例如,你可以使用border属性来设置边框的宽度、样式和颜色。
以下是一个示例代码,用于设置el-input的边框样式:
```css
#search-key-word-input-wrapper .el-input {
border: 1px solid #000;
}
```
你还可以使用其他CSS属性,如border-radius来设置边框的圆角,或使用box-shadow来添加阴影效果。
相关问题
el-input隐藏边框
要隐藏 el-input 的边框,你可以使用以下两种方法之一:
1. 使用 CSS:给 el-input 添加一个自定义的 class,并使用 CSS 设置它的边框为 none。例如:
```css
.hide-border {
border: none;
}
```
然后在 el-input 中添加该 class:
```html
<el-input class="hide-border"></el-input>
```
2. 使用 el-input 的属性:el-input 提供了一个名为 border 的属性,可以用来控制边框的显示。设置 border 属性为 false 可以隐藏边框。例如:
```html
<el-input :border="false"></el-input>
```
无论使用哪种方法,都可以实现 el-input 的边框隐藏效果。
el-input去边框
去掉el-input的边框,可以使用Vue的深度选择器>>>来穿透scoped属性,然后设置.el-input__inner的border为0即可。如果el-input的type设置成了textarea,还需要设置.el-textarea__inner的resize为none,这样就可以去掉下面拉伸的标志了。具体操作如下:
```css
/* 利用穿透,设置input边框隐藏 */
.parent >>> .el-input__inner {
border: 0;
}
/* 如果你的 el-input type 设置成textarea ,就要用这个了 */
.parent >>> .el-textarea__inner {
border: 0;
resize: none;
}
```
其中,parent是el-input的父级元素,可以根据实际情况进行修改。