修改el-input中placeholder里文字的全部/部分文字样式

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>

实现效果