1. 程式人生 > >設置placeholder無效解決辦法

設置placeholder無效解決辦法

再次 tex 方式 信息 提示信息 col color imp spa

一、設置placeholder的方法

placeholder屬性用來設置控件內部的提示信息

<input type="text" placeholder="請輸入用戶名">

  

改變placeholder的樣式:

input::placeholder {
    color: red;
    font-size: 22px;
}

  

二、各瀏覽器樣式兼容設置

1、針對谷歌瀏覽器的設置方式:

input::-webkit-input-placeholder {
    color: red;
    font-size: 22px;
}

2、針對火狐瀏覽器的設置方式:

input::-moz-placeholder {
    color: red;
    font-size: 22px;
}

3、針對IE瀏覽器的設置方式:

input:-ms-input-placeholder {
    color: red;
    font-size: 22px;
}

  

三、設置placeholder的樣式無效--解決方法

設置placeholder方法無效的原因:

如果在某些公共樣式中,已經對placeholder的樣式進行了設置,再次對placeholder的樣式進行設置時,就會無效,

解決方法是,給樣式加 !important; 增加權重即可。

設置placeholder無效解決辦法