CSS修改input标签中placeholder值的文字样式

最新推荐文章于 2025-10-10 23:14:36 发布

原创最新推荐文章于 2025-10-10 23:14:36 发布 · 5.4k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端

大二软设问题集合

本文详细介绍了HTML5 placeholder属性的定义、用法，不同浏览器的选择器，以及如何修改其样式。通过实例展示了如何为Google输入框添加提示效果，包括text和search类型的样式定制。

该文章已生成可运行项目，

5.设置input中placeholder属性的文字样式——软设问题总结系列

5.1 placeholder的定义和用法
5.2 placeholder选择器
5.3支持修改的属性
5.4 案例

5.1 placeholder的定义和用法

placeholder是HTML5 input的新属性，它一般表示input输入框的默认提示值；
placeholder属性提供可描述输入字段预期值的提示信息(hint)；
该提示会在输入字段为空时显示，并会在字段获得焦点时消失；
placeholder 属性适用于以下的 <input> 类型：text，search， url， telephone，email 以及 password。

5.2 placeholder选择器

placeholder属性选择器在各大浏览器都不太一样，如下：

	/* Chrome/Opera/Safari */
    ::-webkit-input-placeholder {}
     
    /* Firefox 19+ */
    ::-moz-placeholder {} 
    
    /* IE 10+ */
    :-ms-input-placeholder {} 
      
    /* Firefox 18- */
    :-moz-placeholder {}

5.3支持修改的属性

font
color
background
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
text-indent
opacity

5.4 案例

以Google为例：

    <!-- html -->
    <input type="text" placeholder="提示信息">
    <input type="search" placeholder="search类型">

	input {
            display: block;
            margin-bottom: 10px;
        }

常规效果图如下：
在这里插入图片描述添加样式：

        input[type='text']::-webkit-input-placeholder {
            color: #000;
            text-decoration: line-through;
        }

效果图如下：
在这里插入图片描述

本文章已经生成可运行项目

标签

#css #html5 #html