完美世界有声小说,国际完美世界下载

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

純css如何實(shí)現(xiàn)輸入框placeholder動(dòng)效及輸入校驗(yàn)

小編給大家分享一下純css如何實(shí)現(xiàn)輸入框placeholder動(dòng)效及輸入校驗(yàn)，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括觀山湖網(wǎng)站建設(shè)、觀山湖網(wǎng)站制作、觀山湖網(wǎng)頁制作以及觀山湖網(wǎng)絡(luò)營(yíng)銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，觀山湖網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到觀山湖省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

背景

話不多說，我們能否用純css實(shí)現(xiàn)以下效果:

純css如何實(shí)現(xiàn)輸入框placeholder動(dòng)效及輸入校驗(yàn)

答案是肯定的。

借助css:placeholder-shown :valid :invalid偽類及html5 input pattern 屬性就可以實(shí)現(xiàn)

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

:placeholder-shown兼容性

純css如何實(shí)現(xiàn)輸入框placeholder動(dòng)效及輸入校驗(yàn)

直接上代碼！??

源碼

https://jsbin.com/qenucaz/edit?html,css,output

html:




  
  
  JS Bin


  
    
    close
    郵箱

css:

.input-fill{
  width: 100%;
  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-fill:placeholder-shown::placeholder {
    color: transparent;
    
}
.input-fill-box {
  width: 50%;
    position: relative;
}
.input-label {
    position: absolute;
    left: 16px; top: 14px;
    pointer-events: none;
    color:#BEC1D9;
   padding: 0 2px;
    transform-origin: 0 0;
    pointer-events: none;
    transition: all .25s;
}
.input-fill:not(:placeholder-shown) ~ .input-label,
.input-fill:focus ~ .input-label {
    transform: scale(0.75) translate(0px, -14px);    
}
.input-fill:focus{
  border: 2px solid #1d31aa;
}

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

.input-fill:valid {
 border-color: green;
 box-shadow: inset 5px 0 0 green;
}
.input-fill:not(:placeholder-shown):invalid {
 border-color: red;
 box-shadow: inset 5px 0 0 red;
}

以上是“純css如何實(shí)現(xiàn)輸入框placeholder動(dòng)效及輸入校驗(yàn)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

名稱欄目：純css如何實(shí)現(xiàn)輸入框placeholder動(dòng)效及輸入校驗(yàn)
網(wǎng)頁URL：http://fisionsoft.com.cn/article/pcojjg.html

新聞中心

其他資訊