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

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：申請域名、雅安服務(wù)器托管、營銷軟件、網(wǎng)站建設(shè)、古田網(wǎng)站維護(hù)、網(wǎng)站推廣。

在web項(xiàng)目中，有一個很重的模塊就是登陸/注冊模塊，這個模塊的主體部分就是一個form表單，這個form表單包含兩個重要input組（用戶名/密碼），每個input組都包含label和input，而關(guān)于 label+input 的布局方案多種多樣，不同的設(shè)計師有不同的設(shè)計風(fēng)格，不同的前端工程師又有不同的實(shí)現(xiàn)方式。通過對比發(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中的字體采用左對齊，右對齊，兩端對齊這三種常見的方案）; // 案例：微博登陸，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)觸發(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è)資訊頻道。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當(dāng)前文章：怎么使用css中浮動的label-創(chuàng)新互聯(lián)
文章源于：http://www.rwnh.cn/article2/csiooc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、網(wǎng)站策劃、定制開發(fā)、微信小程序、建站公司、商城網(wǎng)站

廣告

聲明：本網(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)