怎么使用css中浮動的label

本篇文章給大家分享的是有關(guān)怎么使用css中浮動的label，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

成都創(chuàng)新互聯(lián)主要從事成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)潛山,十載網(wǎng)站建設(shè)經(jīng)驗(yàn),價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):028-86922220

在web項(xiàng)目中，有一個很重的模塊就是登陸/注冊模塊，這個模塊的主體部分就是一個form表單，這個form表單包含兩個重要input組（用戶名/密碼），每個input組都包含label和input，而關(guān)于 label+input 的布局方案多種多樣，不同的設(shè)計(jì)師有不同的設(shè)計(jì)風(fēng)格，不同的前端工程師又有不同的實(shí)現(xiàn)方式。通過對比發(fā)現(xiàn)，現(xiàn)在的方案是既注重美觀，又注重性能。

那么，關(guān)于label和input都有哪些布局方案呢?

label+input的布局方案

將label和input（palcholder關(guān)鍵字提示）分為上下兩部分; // 很久以前采用，現(xiàn)在偶爾使用
將label和input（palcholder關(guān)鍵字提示）分為左右兩部分（label占據(jù)一定的寬度，而label中的字體采用左對齊，右對齊，兩端對齊這三種常見的方案）; // 案例：微博登陸，jd wap登陸頁面等
label和input（palcholder關(guān)鍵字提示）還是分為左右兩部分，不同的是label中的字體使用圖標(biāo)代替; // 案例：segment fault社區(qū)登陸頁面等
只包含input（palcholder關(guān)鍵字提示）; // 案例：手淘的登陸頁面，掘金開發(fā)社區(qū)的登陸頁面等
只顯示input（palcholder關(guān)鍵字提示），而label采用浮動并隱藏，當(dāng)觸發(fā)input的焦點(diǎn)事件時label顯示。 // 案例：手淘的之前登陸頁面，或者參考JVFloatLabeledTextField等

這幾種方案各有優(yōu)劣，使用label字體用圖標(biāo)代替更形象，但是增加了圖標(biāo)的url訪問；label的中的字體個數(shù)不一致，看起來不美觀，字?jǐn)?shù)相同，這種方案只能說中規(guī)中矩；而直接丟棄label，可以使界面簡潔美觀，但是label有l(wèi)abel的作用（下面會詳細(xì)說label和placeholder的作用）；使用浮動的label，增加了動畫效果，但需要引入js，這種方案性能，比起不使用js的明顯要高（有一種不用js，但兼容性不是太好的方案）。

label vs placholder

label: 描述表單元素的角色，用來指定input的是唯一字段名稱

placeholder: 它提示用戶輸入內(nèi)容的格式

它們兩個看似類似，但是它們的職責(zé)不同，很多同學(xué)在這里犯了比較大的錯誤。

如果需要知道它們更多的內(nèi)容可參考MDN

帶動畫的label(no-js)

在做用戶交互的頁面時，帶上動畫的用戶交互，往往更容易打動用戶。下面就介紹一個用偽類實(shí)現(xiàn)的浮動label。

HTML代碼：

<div class="input-group">
    <input type="text" id="userName" placeholder="用戶名/郵箱/卡號">
    <label for="userName">賬號</label>
</div>

基本布局css代碼：

.input-group {
    position: relative;
    margin: 100px 20px;
    font-size: 16px;
}

.input-group>input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 16px;
    font-size: 16px;
    line-height: 1.0;
    border: none;
    border-bottom: 1px solid #cdcdcd;
    border-radius: 0.4em;

    transition: box-shadow 0.3s;
}

.input-group input::placeholder {
  color: #cdcdcd;
}

.input-group>input:focus {
    outline: none;
    box-shadow: 0.2em 0.8em 1.6em #cdcdcd;
}

.input-group>label {
    position: absolute;
    bottom: 50%;
    left: 0;
    z-index: -1;
    
    visibility: hidden;
    color: #050505;
    opacity: 0;
}

首先，設(shè)置了 label 的位置（posiion: absolute），并定義了它的層級（z-index: -1），顯隱性為（visibility: hidden），透明度（opacity: 0）;

然后，設(shè)置了input的 placeholder樣式，可使用偽元素 ::placeholder 設(shè)置其樣式；

最后，設(shè)置了一個過渡動畫效果，當(dāng)input元素標(biāo)簽獲得焦點(diǎn)時，使用偽類 :focus 定義了input元素標(biāo)簽獲得焦點(diǎn)時的陰影樣式（box-shadow）和輪廓樣式（outline）。

label浮動效果樣式

 .input-group>label {
      ...

      -webkit-transform-origin: 0 0;
              transform-origin: 0 0;
      -webkit-transform: translate3d(0, 0, 0) scale(0);
              transform: translate3d(0, 0, 0) scale(0);
      -webkit-transition:
          opacity 0.3s,
          visibility 0.3s,
          transform 0.3s,
          z-index 0.3s;
          
              transition:
                  opacity 0.3s,
                  visibility 0.3s,
                  transform 0.3s,
                  z-index 0.3s;
 }

.input-group>input:focus ~ label {
    z-index: 1;
    visibility: visible;
    opacity: 1;
    -webkit-transform: translate3d(0, -36px, 0) scale(1);
        transform: translate3d(0, -36px, 0) scale(1);
}

在定義 label 樣式的集合內(nèi)，添加它的初始 transform 形變效果，同時設(shè)置 transition 過渡效果樣式，然后定義當(dāng) input 獲得焦點(diǎn)時，它的兄弟元素 label 的樣式即可。

這種label浮動的效果和JVFloatLabeledTextField的效果不同，前者是獲取到焦點(diǎn)，label立馬開始浮動，而后者是當(dāng)用戶輸入內(nèi)容時（也就是placeholder消失時），label開始浮動。

要使兩者的效果相同，我們可以使用偽類可以嵌套的特性，修改 .input-group>input:focus ~ label 為 .input-group>input:focus:not(:placeholder-shown) ~ label ，這里的 :placeholder-shown 可以定義 placeholder 的顯隱效果，但它的兼容性不太好，ie/edge 壓根不支持，chrome和safari，以及Firefox還可以。案例：demo

以上就是怎么使用css中浮動的label，小編相信有部分知識點(diǎn)可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當(dāng)前名稱：怎么使用css中浮動的label
網(wǎng)站網(wǎng)址：http://muchs.cn/article26/ghegjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、App設(shè)計(jì)、網(wǎng)站改版、Google、云服務(wù)器、移動網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容