css常用技巧:input提示文字；placeholder字体修改

最新推荐文章于 2024-11-04 11:47:29 发布

原创最新推荐文章于 2024-11-04 11:47:29 发布 · 1.4w 阅读

4 ·

CC 4.0 BY-SA版权

CSS3 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了一种在不同浏览器中修改HTML输入框占位符（placeholder）颜色的方法，通过使用特定的CSS伪元素选择器实现跨浏览器兼容的样式调整。

部署运行你感兴趣的模型镜像

1 很多网站都需要更改 <input>内部的placeholder 文字颜色属性:下面来介绍下这个技巧.

2 源代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>input输入框提示文字</title>
    <style>
        /*修改提示文字的颜色*/
        input::-webkit-input-placeholder { /* WebKit browsers */
            color: #666666;
        }

        input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color: #666666;
        }

        input::-moz-placeholder { /* Mozilla Firefox 19+ */
        color: #666666;
        }

        input:-ms-input-placeholder { /* Internet Explorer 10+ */
        color: #666666;
        }
    </style>
</head>
<body>
<input type="text" placeholder="搜索天猫/商品"/>
</body>
</html>