摘要
该文章主要介绍了如何修改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>
效果