首頁 > web前端 > css教學 > 主體

CSS修改placeholder樣式的方法介紹(程式碼範例)

青灯夜游
發布: 2018-11-10 17:30:23
轉載
8017 人瀏覽過

這篇文章帶給大家的內容是CSS修改placeholder樣式的方法介紹,有一定的參考價值,有需要的朋友可以參考一下,希望對你們有所幫助。

專案用經常遇到修改input的placeholder的顏色的需求,這裡來看一下placeholder如何用css設定:

先來看看chrome預設的input樣式

<input>
登入後複製
登入後複製

(placeholder)

CSS修改placeholder樣式的方法介紹(程式碼範例)

(input style)

CSS修改placeholder樣式的方法介紹(程式碼範例)

可以發現,placeholderinput的預設顏色是有點差別的。現在我們來修改input 的顏色

<input>
登入後複製
登入後複製

(placeholder)

CSS修改placeholder樣式的方法介紹(程式碼範例)

##(input)

CSS修改placeholder樣式的方法介紹(程式碼範例)

不難發現

color屬性只能改變輸入值的顏色,placeholder的顏色沒人改變。 so,如何來改變placeholder的顏色。

要改變

placeholder的顏色就要使用到偽類別::placeholder


<input>
登入後複製
(placeholder)

CSS修改placeholder樣式的方法介紹(程式碼範例)

(input)

CSS修改placeholder樣式的方法介紹(程式碼範例)

要注意的是

::palceholder偽類別的相容性,以上是在chrome瀏覽器的運行結果,同樣的程式碼在IE11就成了這樣

(placeholder - ie11)

CSS修改placeholder樣式的方法介紹(程式碼範例)

(input - ie11)

CSS修改placeholder樣式的方法介紹(程式碼範例)

IE解決方案:

首先IE9及以下不支援placeholder。 IE10需要用

:-ms-input-placeholder,並且屬性需要加上!important來提高優先權。


<input>
登入後複製
(placeholder ie11)

CSS修改placeholder樣式的方法介紹(程式碼範例)

(input ie11)

CSS修改placeholder樣式的方法介紹(程式碼範例)##之後給予其他瀏覽器的適配方案

/* - Chrome ≤56,
   - Safari 5-10.0
   - iOS Safari 4.2-10.2
   - Opera 15-43
   - Opera Mobile >12
   - Android Browser 2.1-4.4.4
   - Samsung Internet
   - UC Browser for Android
   - QQ Browser */
::-webkit-input-placeholder {
    color: #ccc;
    font-weight: 400;
}

/* Firefox 4-18 */
:-moz-placeholder {
    color: #ccc;
    font-weight: 400;
}

/* Firefox 19-50 */
::-moz-placeholder {
    color: #ccc;
    font-weight: 400;
}

/* - Internet Explorer 10–11
   - Internet Explorer Mobile 10-11 */
:-ms-input-placeholder {
    color: #ccc !important;
    font-weight: 400 !important;
}

/* Edge (also supports ::-webkit-input-placeholder) */
::-ms-input-placeholder {
    color: #ccc;
    font-weight: 400;
}

/* CSS Working Draft */
::placeholder {
    color: #ccc;
    font-weight: 400;
}
登入後複製

總結:以上就是本篇的全部內容,希望能對大家的學習有所幫助。

以上是CSS修改placeholder樣式的方法介紹(程式碼範例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:segmentfault.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板