奇妙的css之旅——实现placeholder两种颜色

蜗尔1411

已于 2022-11-05 02:52:45 修改

阅读量1.9k

点赞数 2

文章标签： css 前端 javascript

于 2022-11-04 21:46:29 首次发布

本文链接：https://blog.csdn.net/qq_22375521/article/details/127696594

版权

1.效果图

将就看吧，样式就不美化了，由于公司UI设计了一个类似需求的页面，必填标识必须放入input框的placeholder中，且颜色标红，思来想去决定自己动手实现一番；

2.思路

设置placeholder颜色大家都知道：1）::-webkit-input-placeholder； 2） :-ms-input-placeholder；3）::placeholder；
然后就是想要实现两种颜色，而且没有额外的标签使用，这时候就想到了线性渐变linear-gradient的使用，linear-gradient(to right, black, red)如下图：
上图线性渐变不是我们想要的，我们需要的界限分明的效果，这时候就需要设置渐变范围：linear-gradient(to right, black 0, black 50px, red 50px)如下图：
设置文字颜色，我们需要设置文字透明色，利用文字剪切成现背景色：background-clip: text;-webkit-background-clip: text;color: transparent;
然后就是需要知道placeholder中文字的宽度（除必填星号外），这个需要我们自己将placeholder文字传入，然后根据中文（英文也可以，宽度不一样可以自己定义）长度得到黑色区域宽度值动态设置黑色区域的范围级可，动态设置css属性值需要用到根属性:root
结合以上思路我们就可以很简单的实现这个小demo了

3.实例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ::-webkit-input-placeholder {
            font-style: 1em;
            background: linear-gradient(to right, black 0, black var(--size), red var(--size));
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
        }
        :-ms-input-placeholder {
            font-style: 1em;
            background: linear-gradient(to right, black 0, black var(--size), red var(--size));
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
        }
		::placeholder {
            font-style: 1em;
            background: linear-gradient(to right, black 0, black var(--size), red var(--size));
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
        }
    </style>
</head>
<body>
    <!-- div可以看作一个组件 -->
    <div style="--size:2em">
        <input type="text" placeholder="姓名*">
    </div>
    <!-- div可以看作一个组件 -->
    <div style="--size:3em">
        <input type="text" placeholder="身份证*">
    </div>
</body>
</html>