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

最新推荐文章于 2024-05-13 10:46:20 发布

coder丶东

最新推荐文章于 2024-05-13 10:46:20 发布

阅读量1.4k

点赞数

分类专栏： css 文章标签： css3 表单

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

场景还原

先来看一段代码

<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一致的，在上述例子中我将看到下图的情况

默认光标的颜色和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>