Vue3+Element-Plus如何自定义输入框占位符及内部样式？

我刚接触Vue3和Element-Plus，想修改输入框的占位符、内部字体样式（字号、字重等），但遇到了问题：只有内联样式能生效，单独在style标签里写的样式（用浏览器审查元素拿到的类名）只能修改外部样式，内部的el-input__inner、el-input__wrapper样式完全不生效。

我的模板代码：

<el-input v-model="input"  
           style="width: 614px;
            height: 82px;
            border: 1px solid rgba(168, 192, 39, 1);
            border-radius: 10px;
            margin-left: 653px;
            margin-top: 28px;
             " placeholder="Enter your email address" />

style标签中的代码：

.el-input__inner{
    width: 375px;
    height: 39px;
    font-size: 32px;
    font-weight: 400px;
    line-height: 38.73px;
    margin: 21px 200px 22px 39px;
}

.el-input__wrapper{
    align-items: center;
    padding: none !important;
    border-radius: 10px;
}

1. 穿透Vue的样式作用域 #

Vue单文件组件的style标签默认带scoped属性，会给样式添加作用域前缀，导致无法覆盖Element-Plus组件内部的默认样式。解决办法是使用深度选择器：

• Vue3支持两种深度选择器写法：::v-deep .类名 或 :deep(.类名)，推荐后者。

修改后的style代码示例（保留scoped）：

<style scoped>
:deep(.el-input__inner){
    font-size: 32px;
    font-weight: 400;
    line-height: 38.73px;
    /* 用padding替代margin调整内部间距，避免和外部容器冲突 */
    padding: 21px 200px 22px 39px;
}

:deep(.el-input__wrapper){
    align-items: center;
    padding: 0 !important;
    border-radius: 10px;
}
</style>

2. 修正样式语法错误 #

你的代码里有两个明显错误：

• font-weight: 400px：font-weight的取值是数值（如400代表正常字重）或关键字（如normal、bold），不能添加px单位。
• padding: none !important：CSS中padding没有none这个取值，需改为padding: 0。

3. 自定义占位符样式 #

要修改占位符的字体样式，需要使用CSS伪元素::placeholder，配合深度选择器：

:deep(.el-input__inner::placeholder){
    font-size: 32px;
    font-weight: 400;
    color: #999; /* 可自定义占位符颜色 */
}

4. 统一管理样式（避免内联样式混乱） #

建议把内联的width、height、margin等样式移到style标签中，用深度选择器统一控制：

<style scoped>
:deep(.el-input){
    width: 614px;
    height: 82px;
    margin-left: 653px;
    margin-top: 28px;
}

:deep(.el-input__wrapper){
    border: 1px solid rgba(168, 192, 39, 1);
    border-radius: 10px;
    padding: 0 !important;
}

:deep(.el-input__inner){
    font-size: 32px;
    font-weight: 400;
    line-height: 38.73px;
    padding: 21px 200px 22px 39px;
}

:deep(.el-input__inner::placeholder){
    font-size: 32px;
    font-weight: 400;
    color: #999;
}
</style>

内容的提问来源于stack exchange，提问作者coochie