el-input 的边框
时间: 2025-03-27 20:21:45 浏览: 27
### 修改 `el-input` 组件的边框样式
为了修改 Element UI 中 `el-input` 组件的边框样式,可以通过覆盖默认的 CSS 类来实现这一目标。Element UI 的输入组件通常会应用特定的类名,这些类名可以被用来编写更具针对性的样式规则。
对于大多数情况而言,在项目的全局样式文件或是相应页面的 `<style scoped>` 标签内添加如下所示的自定义 CSS 即可改变边框颜色、宽度和其他属性:
```css
/* 自定义 el-input 边框 */
.el-input__inner {
border-color: red !important; /* 设置新的边框颜色 */
}
```
如果希望仅当输入框获得焦点时才显示不同的边框,则应针对 `.el-input__inner:focus` 进行设置[^1]。
另外一种方法是在 Vue 文件中的模板部分给 `el-input` 添加额外的 class 属性,并在此基础上进一步定制化其外观表现形式。例如:
```html
<template>
<div>
<!-- 使用 custom-border-class 来指定特殊的样式 -->
<el-input v-model="inputValue" class="custom-border"></el-input>
</div>
</template>
<style lang="scss">
.custom-border .el-input__inner {
border-radius: 8px;
border-width: 2px;
border-style: solid;
border-color: blue;
&:focus { /* 当获取到焦点的时候 */
box-shadow: none;
outline: none;
border-color: green;
}
}
</style>
```
上述代码片段展示了如何通过 SCSS 或者普通的 CSS 定义一个新的类名为 `custom-border` 的样式并应用于单个 `el-input` 实例上,从而达到个性化设计的目的[^2]。
阅读全文
相关推荐



















