CSS3改变表单控件光标的颜色

场景还原

先来看一段代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单光标</title>
    <style>
        #text1{
            color: red;
        }
    </style>
</head>
<body>
    <input id="text1" type="text" placeholder="请在这里输入内容">
</body>
</html>

在我们的项目中，输入框中的光标颜色默认是和输入框的style属性color一致的，在上述例子中我将看到下图的情况

现在我想要的效果是，输入框中的文字显示的是红色，而光标的颜色是蓝色。要实现这样的效果我们需要怎么做呢？接下来我们就来利用css3实现我们想要的效果

解决方案一

阅读大漠老师的文章，我们找到了一种解决方案，利用css的-webkit-text-fill-color:transparent将输入框中的文字设置为透明，然后设置文字的发光属性text-shadow将文字显示出来。请看下面简单的演示代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单光标</title>
    <style>
        #text2{
            color: blue;
            text-shadow: 0 0 0 red;
            -webkit-text-fill-color: transparent;
        }
    </style>
</head>
<body>
    <input id="text2" type="text" placeholder="请在这里输入内容">
</body>
</html>

效果图如下

到这里基本的效果已经实现，但是上面的代码有一个缺陷：input中设置的placeholder属性的颜色也会被设置为红色，出现下图的情况

要解决这一缺陷，我们只需要设置placeholder属性的样式就可以了，具体代码如下

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单光标</title>
    <style>
        input::-webkit-input-placeholder{
            color: #ccc;
            text-shadow: none;
            -webkit-text-fill-color: initial;
        }
        #text2{
            color: blue;
            text-shadow: 0 0 0 red;
            -webkit-text-fill-color: transparent;
        }
    </style>
</head>
<body>
    <input id="text2" type="text" placeholder="请在这里输入内容">
</body>
</html>

到这里，我们完美解决了输入框光标颜色的改变问题。

解决方案二

查阅相关文档我们可以找到caret-color属性，利用这个属性，我们也可做到上述效果。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单光标</title>
    <style>
        #text3{
            color: red;
            caret-color : blue;
        }
    </style>
</head>
<body>
    <input id="text3" type="text" placeholder="请在这里输入内容">
</body>
</html>

效果图如下

这种方法是不是很简单呢，不过先不要急着高兴，这么简单的方法存在的兼容问题也是不小的，具体的兼容情况请看下图

有兴趣的同学可以去看一下大漠大神写的这篇文章如何改变表单控件光标颜色