如何实现el-input的placeholder的提示文字在左边,输入内容在右边
时间: 2024-02-21 20:58:12 浏览: 201
你可以使用CSS来实现el-input的placeholder提示文字在左侧,输入内容在右侧。具体实现方法如下:
1. 首先,需要给el-input添加一个自定义的class,例如我们这里添加一个名为`my-input`的class,如下所示:
```html
<el-input class="my-input" placeholder="请输入内容"></el-input>
```
2. 接着,在CSS中设置该class的样式,将placeholder的文字位置设为左侧,输入内容的位置设为右侧,如下所示:
```css
.my-input .el-input__inner::-webkit-input-placeholder {
text-align: left;
}
.my-input .el-input__inner::-moz-placeholder {
text-align: left;
}
.my-input .el-input__inner:-moz-placeholder {
text-align: left;
}
.my-input .el-input__inner:-ms-input-placeholder {
text-align: left;
}
.my-input .el-input__inner::placeholder {
text-align: left;
}
.my-input .el-input__inner {
text-align: right;
}
```
上述代码中,我们通过设置不同的伪类选择器,将各种浏览器的placeholder的文字位置设为了左侧。同时,将el-input的输入框的文字位置设为右侧,以实现左侧为提示文字,右侧为输入内容的效果。
希望上述代码能够帮到你!
阅读全文