Element Plus输入框组件el-input圆边角样式修改

作者：System 时间：2024年08月11日分类：所有,vue.js 字数：418

这篇文章距离上次修改已过201天，其中的内容可能已经有所变动。

在Element Plus中，要修改el-input组件的圆角样式，可以通过CSS覆盖默认的样式。以下是一个简单的例子，展示如何通过自定义类来实现：

首先，在你的Vue组件的<style>标签中添加以下CSS：




.rounded-input .el-input__inner {
  border-radius: 20px; /* 设置圆角大小 */
}

然后，在你的el-input组件上添加这个自定义类：




<template>
  <el-input class="rounded-input" placeholder="请输入内容"></el-input>
</template>

这样就会应用上面定义的CSS样式，使得输入框的边角变得圆润。你可以根据需要调整border-radius的值来改变圆角的曲率大小。