国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

浮動的label

Aomine / 2185人閱讀

摘要：下面就介紹一個用偽類實現(xiàn)的浮動。這種浮動的效果和的效果不同，前者是獲取到焦點，立馬開始浮動，而后者是當用戶輸入內容時也就是消失時，開始浮動。

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

那么，關于label和input都有哪些布局方案呢?

label+input的布局方案

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

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

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

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

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

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

label vs placholder

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

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

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

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

帶動畫的label(no-js)

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

HTML代碼：

基本布局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還可以，具體可參考can i use。更多偽類和偽元素知識點總結，可參考pseudo

案例展示

demo

其他

更多關于html layout文章

css3 動畫

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/113997.html

相關文章

  • CSS :placeholder-shown偽類實現(xiàn)輸入框浮動文字效果

    摘要：輸入框的屬性允許您指定沒有輸入內容時出現(xiàn)在元素內的文本。當輸入框被激活并開始輸入內容時，元素會浮動顯示在輸入框的上方。純實現(xiàn)浮動的標簽文字注冊事件，判斷是否輸入有值，隱藏一個元素，并根據(jù)輸入框是否有內容來決定是否顯示這個元素。 在這篇文章中，我們將使用:placeholder-shown偽類創(chuàng)建一個浮動的問題標簽效果，使用純CSS實現(xiàn)。 showImg(https://segmentf...

    arashicage 評論0 收藏0

  • CSS :placeholder-shown偽類實現(xiàn)輸入框浮動文字效果

    摘要：輸入框的屬性允許您指定沒有輸入內容時出現(xiàn)在元素內的文本。當輸入框被激活并開始輸入內容時，元素會浮動顯示在輸入框的上方。純實現(xiàn)浮動的標簽文字注冊事件，判斷是否輸入有值，隱藏一個元素，并根據(jù)輸入框是否有內容來決定是否顯示這個元素。 在這篇文章中，我們將使用:placeholder-shown偽類創(chuàng)建一個浮動的問題標簽效果，使用純CSS實現(xiàn)。 showImg(https://segmentf...

    junbaor 評論0 收藏0

  • CSS :placeholder-shown偽類實現(xiàn)輸入框浮動文字效果

    摘要：輸入框的屬性允許您指定沒有輸入內容時出現(xiàn)在元素內的文本。當輸入框被激活并開始輸入內容時，元素會浮動顯示在輸入框的上方。純實現(xiàn)浮動的標簽文字注冊事件，判斷是否輸入有值，隱藏一個元素，并根據(jù)輸入框是否有內容來決定是否顯示這個元素。 在這篇文章中，我們將使用:placeholder-shown偽類創(chuàng)建一個浮動的問題標簽效果，使用純CSS實現(xiàn)。 showImg(https://segmentf...

    MingjunYang 評論0 收藏0

  • 淺析BFC

    摘要：原文鏈接說起其實有點像閉包在大多數(shù)人印象中的感覺，平時都用過，但在不了解定義的情況下大多數(shù)人卻又不知道這就是。這種行為只存在于兄弟元素在同一下這種情形。上文提到的可以看下大漠的這篇文章參考理解布局和分鐘理解原理 原文鏈接: Fyerls Blog 說起 BFC 其實有點像閉包在大多數(shù)人印象中的感覺，平時都用過，但在不了解定義的情況下大多數(shù)人卻又不知道這就是 BFC。之所以會想了解下什么...

    voyagelab 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<