成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

轉(zhuǎn)：CSS :placeholder-shown偽類實(shí)現(xiàn)Material Design占位符交互效果

gaara / 1800人閱讀

摘要：轉(zhuǎn)自偽類實(shí)現(xiàn)占位符交互效果一規(guī)范中占位符交互效果風(fēng)格占位符交互效果官方示意見(jiàn)此頁(yè)面。我們可以采用絕對(duì)定位最后，對(duì)這個(gè)元素在輸入框時(shí)候，以及非顯示的時(shí)候進(jìn)行重定位縮小并位移到上方四清除按鈕部分上是必要屬性，配合偽類實(shí)現(xiàn)我們的效果。

轉(zhuǎn)自： https://github.com/yougola/bl...

CSS :placeholder-shown偽類實(shí)現(xiàn)Material Design占位符交互效果 一、Material Design規(guī)范中占位符交互效果

Material Design風(fēng)格占位符交互效果官方示意見(jiàn)此demo頁(yè)面。
現(xiàn)在這種設(shè)計(jì)在移動(dòng)端很常見(jiàn)，相信不少人設(shè)計(jì)項(xiàng)目中有實(shí)現(xiàn)過(guò)這種交互，而且，大部分是利用JS實(shí)現(xiàn)的。（ps:weex 不支持這個(gè)樣式）

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

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

:placeholder-shown偽類目前兼容性如下：
兼容性鏈接

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

二、placeholder-shown 優(yōu)點(diǎn)

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

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

jsbin 編輯鏈接
拿一個(gè)輸入框舉例，HTML結(jié)構(gòu)如下：

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

/ 默認(rèn)placeholder顏色透明不可見(jiàn) /

.input-fill:placeholder-shown::placeholder {
    color: transparent;
}
.input-fill{
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  outline: none;
  padding: 20px 16px 6px;
  border: 1px solid transparent;
   background: #f5f5fa;
  border-radius:10px;
  transition: border-color .25s;
}
然后，后面的.input-label這個(gè)label元素代替成為我們?nèi)庋劭吹降恼嘉环Ｎ覀兛梢圆捎媒^對(duì)定位：
.input-fill-box {
    position: relative;
}
.input-label {
    position: absolute;
    left: 16px; top: 14px;
    pointer-events: none;
  color:#BEC1D9;
   padding: 0 2px;
    transform-origin: 0 0;
}

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

.input-fill:not(:placeholder-shown) ~ .input-label,
.input-fill:focus ~ .input-label {
    transform: scale(0.75) translate(0, -14px);
}
.input-fill:focus
{
    border-color: #283282;
}
四、清除按鈕

1.html 部分
input上 required是必要屬性，配合CSS偽類實(shí)現(xiàn)我們的效果。


 close

2.CSS部分
使用的是:valid偽類。這是CSS3中新增偽類，IE10+以及其他現(xiàn)代瀏覽器支持，表示表單合法。由于HTML中的有HTML5表單驗(yàn)證屬性required. 于是，如果文本框沒(méi)有內(nèi)容，則不合法；有內(nèi)容，則合法，就會(huì)觸發(fā)這里的:valid偽類選擇器。而這里:valid偽類控制后面的清除按鈕顯示，于是就實(shí)現(xiàn)了我們想要的效果。
啊，對(duì)了。IE11瀏覽器下不是所有的文本框都有黑色的叉叉嗎，會(huì)跟這里的自定義清除按鈕重疊，::-ms-clear { display: none; }這段代碼可以去之~~

 .clear{
  position:absolute;
  top:10px;
  right:-20px;
   display: none;
    transition: all .25s;
}
.input-fill::-ms-clear { display: none; }
.input-fill:valid + .clear { display: inline; }
.input-fill:not(:focus) + .clear { display: none; }

3.實(shí)現(xiàn)的優(yōu)點(diǎn)
此方法相比傳統(tǒng)JS實(shí)現(xiàn)的好處在于，更簡(jiǎn)單了。JS的話還要偵聽輸入事件(input)等，比較折騰。CSS的話完全瀏覽器自身事件特性，顯然，高效簡(jiǎn)單的多。

4.實(shí)現(xiàn)的不足
不足在于，兼容性。IE9-以下的瀏覽器只能點(diǎn)蠟燭了。

不過(guò)，寫寫原型啊，demo；或者漸進(jìn)增強(qiáng)使用；或者移動(dòng)端開發(fā)等，都可以試試這個(gè)新技能。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/116327.html

相關(guān)文章

  • CSS :placeholder-shown偽類實(shí)現(xiàn)輸入框浮動(dòng)文字效果

    摘要：輸入框的屬性允許您指定沒(méi)有輸入內(nèi)容時(shí)出現(xiàn)在元素內(nèi)的文本。當(dāng)輸入框被激活并開始輸入內(nèi)容時(shí)，元素會(huì)浮動(dòng)顯示在輸入框的上方。純實(shí)現(xiàn)浮動(dòng)的標(biāo)簽文字注冊(cè)事件，判斷是否輸入有值，隱藏一個(gè)元素，并根據(jù)輸入框是否有內(nèi)容來(lái)決定是否顯示這個(gè)元素。 在這篇文章中，我們將使用:placeholder-shown偽類創(chuàng)建一個(gè)浮動(dòng)的問(wèn)題標(biāo)簽效果，使用純CSS實(shí)現(xiàn)。 showImg(https://segmentf...

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

  • CSS :placeholder-shown偽類實(shí)現(xiàn)輸入框浮動(dòng)文字效果

    摘要：輸入框的屬性允許您指定沒(méi)有輸入內(nèi)容時(shí)出現(xiàn)在元素內(nèi)的文本。當(dāng)輸入框被激活并開始輸入內(nèi)容時(shí)，元素會(huì)浮動(dòng)顯示在輸入框的上方。純實(shí)現(xiàn)浮動(dòng)的標(biāo)簽文字注冊(cè)事件，判斷是否輸入有值，隱藏一個(gè)元素，并根據(jù)輸入框是否有內(nèi)容來(lái)決定是否顯示這個(gè)元素。 在這篇文章中，我們將使用:placeholder-shown偽類創(chuàng)建一個(gè)浮動(dòng)的問(wèn)題標(biāo)簽效果，使用純CSS實(shí)現(xiàn)。 showImg(https://segmentf...

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

  • CSS :placeholder-shown偽類實(shí)現(xiàn)輸入框浮動(dòng)文字效果

    摘要：輸入框的屬性允許您指定沒(méi)有輸入內(nèi)容時(shí)出現(xiàn)在元素內(nèi)的文本。當(dāng)輸入框被激活并開始輸入內(nèi)容時(shí)，元素會(huì)浮動(dòng)顯示在輸入框的上方。純實(shí)現(xiàn)浮動(dòng)的標(biāo)簽文字注冊(cè)事件，判斷是否輸入有值，隱藏一個(gè)元素，并根據(jù)輸入框是否有內(nèi)容來(lái)決定是否顯示這個(gè)元素。 在這篇文章中，我們將使用:placeholder-shown偽類創(chuàng)建一個(gè)浮動(dòng)的問(wèn)題標(biāo)簽效果，使用純CSS實(shí)現(xiàn)。 showImg(https://segmentf...

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

  • 神奇的選擇器 :focus-within

    摘要：的偽類選擇器和偽元素選擇器，讓有了更為強(qiáng)大的功能。劃重點(diǎn)，它或它的后代獲得焦點(diǎn)。另外，劃重點(diǎn)，這個(gè)偽類是仍處于實(shí)驗(yàn)室的方案。最后感謝耐心讀完。CSS 的偽類選擇器和偽元素選擇器，讓 CSS 有了更為強(qiáng)大的功能。 偽類大家聽的多了，偽元素可能聽到的不是那么頻繁，其實(shí) CSS 對(duì)這兩個(gè)是有區(qū)分的。 有個(gè)錯(cuò)誤有必要每次講到偽類都提一下，有時(shí)你會(huì)發(fā)現(xiàn)偽類元素使用了兩個(gè)冒號(hào) (::) 而不是一個(gè)冒...

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

  • 純css實(shí)現(xiàn)Material Design中的水滴動(dòng)畫按鈕

    摘要：但是往往要引入一大堆和，其實(shí)在已有的項(xiàng)目中，可能只是想加一個(gè)這樣的按鈕，來(lái)增強(qiáng)用戶體驗(yàn)，這些庫(kù)就顯得有些過(guò)于龐大了，同時(shí)由于是實(shí)現(xiàn)，很多時(shí)候還要注意加載問(wèn)題。 前言 大家平時(shí)應(yīng)該經(jīng)常見(jiàn)到這種特效，很炫酷不是嗎 showImg(https://segmentfault.com/img/remote/1460000016740061?w=318&h=190); 這是谷歌Material D...

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

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

0條評(píng)論

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