您好,登錄后才能下訂單哦!
這篇文章主要介紹CSS修改placeholder樣式的方法是什么,文中介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們一定要看完!
項(xiàng)目用經(jīng)常遇到修改input的placeholder的顏色的需求,這里來看一下placeholder如何用css設(shè)置:
首先來看一下chrome默認(rèn)的input樣式
<input type="text" placeholder="hello world">
(placeholder)
(input style)
可以發(fā)現(xiàn),placeholder
和input
的默認(rèn)顏色是有點(diǎn)區(qū)別的?,F(xiàn)在我們來修改input
的顏色
<input type="text" placeholder="hello world" style="color: red">
(placeholder)
(input)
不難發(fā)現(xiàn)color
屬性只能改變輸入值的顏色,placeholder
的顏色沒人任何變化。so,如何來改變placeholder
的顏色。
要改變placeholder
的顏色就要使用到偽類::placeholder
<style> input::placeholder { color: green; } </style> <input type="text" placeholder="hello world" style="color: red;">
(placeholder)
(input)
需要注意的是::palceholder
偽類的兼容性,以上是在chrome瀏覽器的運(yùn)行結(jié)果,同樣的代碼在IE11中就成了這樣
(placeholder - ie11)
(input - ie11)
IE解決方案:
首先IE9及以下不支持placeholder。IE10需要用:-ms-input-placeholder
,并且屬性需要加上!important
提高優(yōu)先級。
<style> input:-ms-input-placeholder { color: green !important; } </style> <input type="text" placeholder="hello world" style="color: red;">
(placeholder ie11)
(input ie11)
之后給出其他瀏覽器的適配方案
/* - 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樣式的方法是什么的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。