通過(guò)css3設(shè)置html5 placeholder字

通過(guò)css3設(shè)置html5 placeholder字體樣式

注本頭條號(hào)，專(zhuān)注做前端。

依然記得在html5推行出來(lái)之前，做網(wǎng)頁(yè)前端的日子，還需要JS來(lái)寫(xiě)才能實(shí)現(xiàn)placeholder效果，自從htm5出來(lái)以后，這個(gè)工作的內(nèi)容雙手就基本被解放了

我們只知道placeholder的字體顏色會(huì)比輸入字體顏色淡一點(diǎn)，但是，如何去設(shè)置一個(gè)placeholder的顏色呢？通過(guò)下面的方法：

/* 通用 */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }
/* webkit專(zhuān)用 */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }
/* mozilla專(zhuān)用 */
#field2::-moz-placeholder { color:#00f; }
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

考慮兼容性，要寫(xiě)很多個(gè)版本，相信在將來(lái)更規(guī)范以后，這個(gè)問(wèn)題會(huì)得到解決

無(wú)實(shí)戰(zhàn)，不前端——切圖學(xué)院

報(bào)名地址：http://qietu.net

般我們常見(jiàn)placeholder偽類(lèi)選擇器用來(lái)修改默認(rèn)樣式及文案，忽然發(fā)現(xiàn)placeholder-shown偽類(lèi)選擇器，比較官方的解釋是

CSS偽類(lèi)表示任何顯示占位符文本的form元素。

簡(jiǎn)單來(lái)說(shuō)就是當(dāng)輸入框的placeholder內(nèi)容顯示的時(shí)候，輸入框干嘛干嘛。

兼容性如下，在移動(dòng)端沒(méi)什么問(wèn)題

placeholder-show是如何工作的？

:placeholder-shown CSS 偽類(lèi) 在 <input> 或 <textarea> 元素顯示 placeholder text 時(shí)生效，簡(jiǎn)單的說(shuō)就是 placeholder 有值才生效，如下所示：

// html
<input placeholder="placeholder text" />
<textarea placeholder="placeholder text"></textarea>

// css 
input:placeholder-shown, textarea:placeholder-shown{ 
  border:1px solid pink;
}

如果 placeholder 為空 placeholder-show 就沒(méi)效果了：

// html
<input placeholder="" />
<textarea placeholder=" text"></textarea>

:placeholder-shown vs ::placeholder

我們可以使用:placeholder-shown設(shè)置input元素的樣式。

input:placeholder-shown {
  border: 1px solid pink;
  background: yellow;
  color: green;
}

注意一些奇怪的問(wèn)題-我們?cè)O(shè)置 color: green，但沒(méi)有作用用。這是因?yàn)?placeholder-shown僅會(huì)針對(duì)input本身。對(duì)于實(shí)際的占位符文本，必須使用偽元素::placeholder。

input::placeholder {
  color: green;
}

?? 我注意到有一些其他的屬性，如果應(yīng)用::placeholder-shown，也會(huì)影響placeholder的樣式。

input:placeholder-shown, textarea:placeholder-shown{ 
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 5px;
}

我也不知道這是啥情況，也許是因?yàn)檫@些屬性被placeholder繼承了，如果你知道原因，歡迎留言告訴我一下，謝謝。

:placeholder-shown vs :empty

:placeholder-shown是專(zhuān)門(mén)用于確定元素是否顯示占位符的對(duì)象，我們主要使用它來(lái)檢查input 內(nèi)容是否為空（假設(shè)所有的input都有一個(gè)占位符）。這里你可能會(huì)想，使用 empty 也是可以的吧？我們來(lái)看看。

// html
<input value="not empty">
<input><!-- empty -->

// css
input:empty {
  border: 1px solid pink;
}

input {
  border: 1px solid black;
}

這里看似empty起作用了，因?yàn)槲覀兛吹降氖欠奂t色邊框，但這實(shí)際上不起作用

之所以顯示粉紅色，是因?yàn)閭晤?lèi)增加了 css 的權(quán)重。類(lèi)似于類(lèi)選擇器（即.form-input）比類(lèi)型選擇器（即input）具有更高的權(quán)重。高權(quán)限選擇器將始終覆蓋低權(quán)重設(shè)置的樣式。

所以我們可以這樣說(shuō)：不要使用:empty檢查輸入元素是否為空。

如果檢查 input 內(nèi)容是否為空（在沒(méi)有點(diǎn)位符的情況下）？

我們檢查輸入是否為空的唯一方法是使用:placeholder-shown。但是如果我們的輸入元素沒(méi)有占位符會(huì)發(fā)生什么呢? 這里有個(gè)取巧的方法：傳入一個(gè)空字符串" "。

// html
<input placeholder=" "><!--  pass empty string -->

//css
input:placeholder-shown {
  border-color: pink;
}

組合其它選擇器

我們可以使用:not偽類(lèi)對(duì)某些事物進(jìn)行逆運(yùn)算。在這里，我們可以在輸入不是空的情況下進(jìn)行定位。

//html
<input placeholder="placeholder" value="not empty" />

// css
input:not(:placeholder-shown) {
  border: 1px solid green;
}

實(shí)戰(zhàn)

用placeholder-shown我們可以實(shí)現(xiàn)下面動(dòng)效

具體代碼如下:

Html

<div class="input">
    <input class="input-fill" placeholder="郵箱">
    <label class="input-label">郵箱</label>
</div>

Css

.input{
   position: relative;
 }
.input-fill{
  border: 1px solid #ececec;
  outline: none;
  padding: 13px 16px 13px;
  font-size: 16px;
  line-height: 1.5;
  width: fit-content;
  border-radius: 5px;
}
.input-fill:placeholder-shown::placeholder {
  color: transparent;
}
.input-label {
  position: absolute;
  font-size: 16px;
  line-height: 1.5;
  left: 16px; top: 14px;
  color: #a2a9b6;
  padding: 0 2px;
  transform-origin: 0 0;
  pointer-events: none;
  transition: all .25s;
}
.input-fill:focus{
  border: 1px solid #2486ff;
}
.input-fill:not(:placeholder-shown) ~ .input-label,
.input-fill:focus ~ .input-label {
  transform: scale(0.75) translate(0, -32px);
  background-color: #fff;
  color: #2486ff;
}

作者：Samantha Ming 譯者：前端小智來(lái)源：medium 原文：https://www.samanthaming.com/tidbits/88-css-placeholder-shown/

aterial Design規(guī)范中占位符交互效果

Material Design風(fēng)格占位符交互效果官方示意見(jiàn)此demo頁(yè)面。

效果可以參見(jiàn)下面的GIF錄屏示意：

示意

現(xiàn)在這種設(shè)計(jì)在移動(dòng)端很常見(jiàn)，因?yàn)閷挾仁窍∪钡?。相信不少人設(shè)計(jì)項(xiàng)目中有實(shí)現(xiàn)過(guò)這種交互，而且，我敢保證是利用JS實(shí)現(xiàn)的。

實(shí)際上，我們可以借助CSS :placeholder-shown偽類(lèi)，純CSS，無(wú)任何JS，實(shí)現(xiàn)這樣的占位符交互效果。

:placeholder-shown表示，當(dāng)輸入框的placeholder內(nèi)容顯示的時(shí)候，輸入框干嘛干嘛。

:placeholder-shown偽類(lèi)目前兼容性如下：

兼容性還是很不錯(cuò)的，在移動(dòng)端我們可以放心使用。因?yàn)榫退阋恍├鲜謾C(jī)不支持，也不過(guò)是傳統(tǒng)的placeholder占位符效果，并沒(méi)有什么損失。

:placeholder-shown經(jīng)典案例

下面展示使用幾個(gè):placeholder-shown實(shí)現(xiàn)label特性占位符案例。

你可以狠狠地點(diǎn)擊這里：:placeholder-shown實(shí)現(xiàn)占位符過(guò)渡動(dòng)畫(huà)demo

下面就是我實(shí)現(xiàn)的demo頁(yè)面中的效果圖（GIF動(dòng)圖）：

效果圖

輸入內(nèi)容功能也是布局效果也是正常的：

輸入內(nèi)容功能也是布局效果

純CSS實(shí)現(xiàn)，要比JS實(shí)現(xiàn)好一千倍，代碼少，性能高，樣式調(diào)整方便，上手簡(jiǎn)單容易，可謂是前端必備技能了。

實(shí)現(xiàn)原理

拿第一個(gè)fill模式的輸入框舉例，HTML結(jié)構(gòu)如下：

首先，讓瀏覽器默認(rèn)的placeholder效果不可見(jiàn)，我們可以讓顏色透明即可，如下CSS：

然后，后面的.input-label這個(gè)label元素代替成為我們?nèi)庋劭吹降恼嘉环?。我們可以采用絕對(duì)定位：

最后，對(duì)這個(gè)label元素在輸入框focus時(shí)候，以及非placeholder顯示的時(shí)候進(jìn)行重定位（縮小并位移到上方）：

于是，效果達(dá)成！

是不是要比JS寫(xiě)各種事件，判斷各種場(chǎng)景簡(jiǎn)單多了？

三、趕快項(xiàng)目中用起來(lái)吧

趕快項(xiàng)目中用起來(lái)吧！或者把這個(gè)技術(shù)分享給其他小伙伴吧~

其他

demo頁(yè)面還使用了其他一些CSS3屬性，例如，外部容器寬度是跟著輸入框?qū)挾茸叩?，使用的是width:fit-content這個(gè)聲明。
輸入框focus時(shí)候有個(gè)邊框動(dòng)畫(huà)效果，借助了:focus-within偽類(lèi)選擇器，:focus-within偽類(lèi)選擇器也是非常強(qiáng)非常實(shí)用以后會(huì)大火的選擇器，如果不了解的一定要進(jìn)行了解。
:placeholder-shown還可以實(shí)現(xiàn)下面的交互：輸入框的后面（或下方）會(huì)有關(guān)于輸入內(nèi)容的說(shuō)明和提示信息（因?yàn)楹荛L(zhǎng)，placeholder放不下），當(dāng)用戶輸入內(nèi)容，提示信息消失。
兼容性: IE10和egde下，填充模式慘不忍睹，其他無(wú)效果

在線咨詢(xún)

上一篇：HTML DOM del 對(duì)象
下一篇：前端工程-從原理到輪子之JS模塊化

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商