成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS如何修改placeholder樣式

CoderBear / 605人閱讀

摘要：項(xiàng)目用經(jīng)常遇到修改的的顏色的需求，這里來(lái)看一下如何用設(shè)置原文發(fā)布與我的個(gè)人博客首先來(lái)看一下默認(rèn)的樣式可以發(fā)現(xiàn)，和的默認(rèn)顏色是有點(diǎn)區(qū)別的。現(xiàn)在我們來(lái)修改的顏色不難發(fā)現(xiàn)屬性只能改變輸入值的顏色，的顏色沒(méi)人任何變化。

項(xiàng)目用經(jīng)常遇到修改input的placeholder的顏色的需求，這里來(lái)看一下placeholder如何用css設(shè)置:

原文發(fā)布與我的個(gè)人博客>>

首先來(lái)看一下chrome默認(rèn)的input樣式

(placeholder)

(input style)

可以發(fā)現(xiàn)，placeholder和input的默認(rèn)顏色是有點(diǎn)區(qū)別的。現(xiàn)在我們來(lái)修改input 的顏色

(placeholder)

(input)

不難發(fā)現(xiàn)color屬性只能改變輸入值的顏色，placeholder的顏色沒(méi)人任何變化。so，如何來(lái)改變placeholder的顏色。

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

(placeholder)

(input)

需要注意的是::palceholder偽類的兼容性，以上是在chrome瀏覽器的運(yùn)行結(jié)果，同樣的代碼在IE11中就成了這樣

(placeholder - ie11)

(input - ie11)

IE解決方案:

首先IE9及以下不支持placeholder。IE10需要用:-ms-input-placeholder,并且屬性需要加上!important提高優(yōu)先級(jí)。

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/114182.html

相關(guān)文章

  • CSS如何修改placeholder樣式

    摘要：項(xiàng)目用經(jīng)常遇到修改的的顏色的需求，這里來(lái)看一下如何用設(shè)置原文發(fā)布與我的個(gè)人博客首先來(lái)看一下默認(rèn)的樣式可以發(fā)現(xiàn)，和的默認(rèn)顏色是有點(diǎn)區(qū)別的?，F(xiàn)在我們來(lái)修改的顏色不難發(fā)現(xiàn)屬性只能改變輸入值的顏色，的顏色沒(méi)人任何變化。 項(xiàng)目用經(jīng)常遇到修改input的placeholder的顏色的需求，這里來(lái)看一下placeholder如何用css設(shè)置: 原文發(fā)布與我的個(gè)人博客>> 首先來(lái)看一下chrome默認(rèn)...

    maochunguang 評(píng)論0 收藏0

  • 【CSS練習(xí)】IT修真院--練習(xí)4-移動(dòng)端界面

    摘要：任務(wù)四一個(gè)最常見(jiàn)的移動(dòng)端頁(yè)面完成的事情完成簡(jiǎn)單布局，然后填充界面與效果圖對(duì)比優(yōu)化完成驗(yàn)收要求擴(kuò)展性頂欄固定進(jìn)行樣式兼容性研究完成任務(wù)四深度思考跟隨深度思考師兄建議進(jìn)行修改輸入欄左側(cè)換用輸入限制電話位，密碼位根據(jù)結(jié)構(gòu)的語(yǔ)義化修改嘗試下再加一 任務(wù)四、 一個(gè)最常見(jiàn)的移動(dòng)端頁(yè)面 完成的事情 完成簡(jiǎn)單布局，然后填充界面 與效果圖對(duì)比優(yōu)化 完成驗(yàn)收要求：header擴(kuò)展性 & 頂欄固定 進(jìn)行p...

    kun_jian 評(píng)論0 收藏0

  • 對(duì)移動(dòng)端兼容適配的分析

    摘要：一思考在移動(dòng)端越來(lái)越重要的背景下，每位開(kāi)發(fā)者對(duì)移動(dòng)適配都有自己的想法。這個(gè)和移動(dòng)端的設(shè)計(jì)體驗(yàn)方式是比較像的。對(duì)移動(dòng)端的特殊性進(jìn)行適配，如問(wèn)題，默認(rèn)樣式等。 一、思考 在移動(dòng)端越來(lái)越重要的背景下，每位web開(kāi)發(fā)者對(duì)移動(dòng)適配都有自己的想法。是移動(dòng)優(yōu)先，還是PC優(yōu)先，還是兩者兼得？在實(shí)際開(kāi)發(fā)中這個(gè)問(wèn)題是和項(xiàng)目產(chǎn)品定位有關(guān)的，也涉及到UI的設(shè)計(jì)，不是開(kāi)發(fā)者能決定。但不管產(chǎn)品如何定位，作為開(kāi)發(fā)...

    huashiou 評(píng)論0 收藏0

  • 使用Sass來(lái)寫OOCSS

    摘要：自從年提出以來(lái)。它就成為一個(gè)領(lǐng)先的模塊系統(tǒng)，用來(lái)組織你的代碼方式之一。換句話說(shuō)，你的樣式中盡量不要使用標(biāo)簽或者標(biāo)識(shí)符。我們必須使用來(lái)創(chuàng)建對(duì)象，通過(guò)在類中調(diào)用，將其合在一起。如果你不在刻意在中追求語(yǔ)義化，你仍然可以使用。 自從2008年Nicole Sullivan提出Object-Oriented CSS(OOCSS)以來(lái)。它就成為一個(gè)領(lǐng)先的模塊系統(tǒng)，用來(lái)組織你的CSS代碼方式之一。 ...

    Carl 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

CoderBear

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<