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

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;
        }

效果图如下：