怎么使用css中浮動(dòng)的label

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

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

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

label+input的布局方案

1. 將label和input（palcholder關(guān)鍵字提示）分為上下兩部分; // 很久以前采用，現(xiàn)在偶爾使用

2. 將label和input（palcholder關(guān)鍵字提示）分為左右兩部分（label占據(jù)一定的寬度，而label中的字體采用左對(duì)齊，右對(duì)齊，兩端對(duì)齊這三種常見的方案）; // 案例：微博登陸，jd wap登陸頁面等

3. label和input（palcholder關(guān)鍵字提示）還是分為左右兩部分，不同的是label中的字體使用圖標(biāo)代替; // 案例：segment fault社區(qū)登陸頁面等

4. 只包含input（palcholder關(guān)鍵字提示）; // 案例：手淘的登陸頁面，掘金開發(fā)社區(qū)的登陸頁面等

5. 只顯示input（palcholder關(guān)鍵字提示），而label采用浮動(dòng)并隱藏，當(dāng)觸發(fā)input的焦點(diǎn)事件時(shí)label顯示。 // 案例：手淘的之前登陸頁面，或者參考JVFloatLabeledTextField等

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

label vs placholder

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

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

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

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

帶動(dòng)畫的label(no-js)

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

HTML代碼：

<div class="input-group">
    <input type="text" id="userName" placeholder="用戶名/郵箱/卡號(hào)">
    <label for="userName">賬號(hào)</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），并定義了它的層級(jí)（z-index: -1）， 顯隱性為（visibility: hidden），透明度（opacity: 0）;

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

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

label浮動(dòng)效果樣式

 .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í)設(shè)置 transition 過渡效果樣式 ，然后定義當(dāng) input 獲得焦點(diǎn)時(shí)，它的兄弟元素 label 的樣式即可。

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

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

以上就是怎么使用css中浮動(dòng)的label，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。