技術標籤：大二軟設問題集合前端csshtml5html

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

效果圖如下：