css中浮動的label的介紹（附案例）

這篇文章帶給大家的內容是關於css中浮動的label的介紹（附案例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

在web專案中，有一個很重的模組就是登陸/註冊模組，這個模組的主體部分就是一個form表單，這個form表單包含兩個重要input群組（使用者名稱/密碼），每個input組都包含label和input，而關於label input 的佈局方案多種多樣，不同的設計師有不同的設計風格，不同的前端工程師又有不同的實作方式。透過對比發現，現在的方案是既注重美觀，又注重性能。

那麼，關於label和input都有哪些佈局方案呢?

label input的佈局方案

1. 將label和input（palcholder關鍵字提示）分成上下兩部分; // 很久以前採用，現在偶爾使用

2. 將label和input（palcholder關鍵字提示）分成左右兩部分（label佔據一定的寬度，而label中的字體採用左對齊，右對齊，兩端對齊這三種常見的方案）; // 案例：微博登陸，jd wap登陸頁面等

3. label和input（palcholder關鍵字提示）還是分為左右兩部分，不同的是label中的字體使用圖示代替; // 案例：segment fault社群登陸頁等

4. #只包含input（palcholder關鍵字提示）; // 案例：手淘的登陸頁面，掘金開發社區的登陸頁面等

5. 只顯示input（palcholder關鍵字提示），而label採用浮動並隱藏，當觸發input的焦點事件時label顯示。 // 案例：手淘的之前登陸頁面，或者參考JVFloatLabeledTextField等

這幾種方案各有優劣，使用label字體用圖標代替更形象，但是增加了圖標的url存取；label的中的字體個數不一致，看起來不美觀，字數相同，這種方案只能說中規中矩；而直接丟棄label，可以使介面簡潔美觀，但是label有label的作用（下面會詳細說label和placeholder的作用）；使用浮動的label，增加了動畫效果，但需要引入js，這種方案性能，比起不使用js的明顯要高（有一種不用js，但兼容性不是太好的方案）。

label vs placholder

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

placeholder: 它提示使用者輸入內容的格式

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

如果需要知道它們更多的內容可參考MDN

帶動畫的label(no-js)

在做使用者互動的頁面時，帶上動畫的用戶交互，往往更容易打動用戶。下面就介紹一個用偽類實作的浮動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;
}

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

然後，設定了input的placeholder樣式，可使用偽元素::placeholder 設定其樣式；

最後，設定了一個過渡動畫效果，當input元素標籤獲得焦點時，使用偽類:focus 定義了input元素標籤獲得焦點時的陰影樣式（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 樣式的集合內，添加它的初始transform 形變效果，同時設定transition 過渡效果樣式，然後定義當input 獲得焦點時，它的兄弟元素label 的樣式即可。

這種label浮動的效果和JVFloatLabeledTextField的效果不同，前者是獲取到焦點，label立刻開始浮動，而後者是當使用者輸入內容時（也就是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的介紹（附案例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！