在HTML中input的有個placeholder屬性,它可以讓我們在寫表單時給每個input的元素做個提示,讓用戶知道這個輸入框什么作用,該輸入什么樣的數據,很是人性化,

但我們在定義input的placeholder屬性時,它的默認樣式本人感覺是非常的難看,為此我這個半調子的HTML代碼君,百度了一下,找到了如何利CSS來給這個input的placeholder屬性定義樣式

利用css定義input的placeholder屬性

html代碼

<input type="text"  placeholder="UserName"  />

CSS代碼:

input::-webkit-input-placeholder {
/* placeholder顏色  */
    color: #aab2bd;
/* placeholder字體大小  */
    font-size: 12px;
/* placeholder位置  */
    text-align: right;
}

CSS增強代碼

HTML中input的placeholder屬性的CSS樣式定義

input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:#ddd;
}
input::-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:#ddd;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:#ddd;
}
input::-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:#ddd;
}