1.修改input中placeholder样式
实现方法
input的修改方式如下
input::-webkit-input-placeholder {
/* WebKit browsers,webkit内核浏览器 */
color: #a1a1a1;
}
input:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #a1a1a1;
}
input::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #a1a1a1;
}
input:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #a1a1a1;
}
elementui的修改方式如下
.el-input__inner::-webkit-input-placeholder {
/* WebKit browsers,webkit内核浏览器 */
color: #a1a1a1;
}
.el-input__inner:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #a1a1a1;
}
.el-input__inner::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #a1a1a1;
}
.el-input__inner:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #a1a1a1;
}
实现效果
2.修改placeholder的部分文字的样式
实现方法
将placeholder里的文字颜色修改为透明color: transparent;
,再设置需要改变颜色的文字位置,根据位置设置渐变的背景颜色就可以实现。
<!--
样式1:placeholder的前半部分标红
-->
<!--
字符串位置计数从0开始
--size表示需要标红的文字的结束位置(不包含本身)
-->
<p>样式1</p>
<div class="input_holder1" style="--size:7em">
<el-input v-model="title1" placeholder="请输入文章篇名请输入文章篇名"></el-input>
</div>
<!--
样式2:placeholder的后半部分标红
-->
<!--
字符串位置计数从0开始
--size表示需要标红的文字的开始位置
-->
<p>样式2</p>
<div class="input_holder2" style="--size:7em">
<el-input v-model="title2" placeholder="请输入文章篇名请输入文章篇名"></el-input>
</div>
<!--
样式3:placeholder的中间部分标红
-->
<!--
字符串位置计数从0开始
--size表示开始的字符位置
--size2表示结束的字符位置(不包含本身)
-->
<p>样式3</p>
<div class="input_holder3" style="--size:7em;--size2:14em">
<el-input v-model="title3" placeholder="请输入文章篇名请输入文章篇名请输入文章篇名"></el-input>
</div>
<style lang='scss' scoped>
// 样式1
.input_holder1{
/deep/ .el-input__inner::-webkit-input-placeholder {
font-style: 1em;
background: linear-gradient(to right, red 0, red var(--size), #777777 var(--size));
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
/deep/ .el-input__inner:-ms-input-placeholder {
font-style: 1em;
background: linear-gradient(to right, red 0, red var(--size), #777777 var(--size));
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
/deep/ .el-input__inner::placeholder {
font-style: 1em;
background: linear-gradient(to right, red 0, red var(--size), #777777 var(--size));
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
}
// 样式2
.input_holder2{
/deep/ .el-input__inner::-webkit-input-placeholder {
font-style: 1em;
background: linear-gradient(to right, #777777 0, #777777 var(--size), red var(--size));
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
/deep/ .el-input__inner:-ms-input-placeholder {
font-style: 1em;
background: linear-gradient(to right, #777777 0, #777777 var(--size), red var(--size));
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
/deep/ .el-input__inner::placeholder {
font-style: 1em;
background: linear-gradient(to right, #777777 0, #777777 var(--size), red var(--size));
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
}
// 样式3
.input_holder3{
/deep/ .el-input__inner::-webkit-input-placeholder {
font-style: 1em;
background: linear-gradient(to right, #777777 0, #777777 var(--size), red var(--size), red var(--size2), #777777 var(--size2));
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
/deep/ .el-input__inner:-ms-input-placeholder {
font-style: 1em;
background: linear-gradient(to right, #777777 0, #777777 var(--size), red var(--size), red var(--size2), #777777 var(--size2));
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
/deep/ .el-input__inner::placeholder {
font-style: 1em;
background: linear-gradient(to right, #777777 0, #777777 var(--size), red var(--size), red var(--size2), #777777 var(--size2));
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
}
</style>