ElementUI 修改el-input中placeholder全部&部分文字样式

摘要

该文章主要介绍了如何修改html中input以及ElementUI组件的placeholder中的样式，包括全部&部分文字样式。

修改placeholder全部样式

• 原生input修改placeholde样式

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中修改placeholde样式

.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; 
}

修改placeholder部分文字样式

实现方式：将placeholder里的文字颜色修改为透明color: transparent;，再设置需要改变颜色的文字位置，根据位置设置渐变的背景颜色就可以实现。

<script setup lang="ts">
const title1 = ref<string>('')
const title2 = ref<string>('')
const title3 = ref<string>('')
</script>

<template>
  <div class="home">
    <!-- 样式1：placeholder的前面部分标红 -->
    <!-- 字符串位置计数从0开始   --size表示需要标红的文字的开始位置 -->
    <p>样式1</p>
    <div class="input_holder1" style="--size:10em">
      <el-input v-model="title1" placeholder="ElementUI修改el-input中placeholder全部&部分文字样式" />
    </div>

    <!-- 样式2：placeholder的后面部分标红 -->
    <p>样式2</p>
    <div class="input_holder2" style="--size:10em">
      <el-input v-model="title2" placeholder="ElementUI修改el-input中placeholder全部&部分文字样式" />
    </div>

    <!-- 样式3：placeholder的中间部分标红 -->
    <p>样式3</p>
    <div class="input_holder3" style="--size:6.7em;--size2:16.1em">
      <el-input v-model="title3" placeholder="ElementUI修改el-input中placeholder全部&部分文字样式" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.home {
  width: 400px;
  padding: 20px;
}
.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;
  }
}

.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>

效果