形式動畫爲主題的形式

Question

有過一看很多很多codepen材料設計形式後，我發現他們基本的HTML結構是

<form> 
    <div class="form-group"> 
    <input type="text"><span class="bar"></span> 
    <label>Name</label> 
    </div> 
    <div class="form-group"> 
    <input type="email"><span class="bar"></span> 
    <label>Email</label> 
    </div> 
    <button type="button" class="button buttonBlue">Subscribe 
    <div class="ripples buttonRipples"><span class="ripplesCircle"></span></div> 
    </button> 
</form> 
<br> 

Example Codepen

總之， <input>總是高於<label>

什麼CSS我需要修改，以確保輸出保持不變，當<label>是否在<input>之上？

Answer 1

如果您正在使用材料設計，那麼無需編寫自定義CSS，他們已經爲此提供了演示。

對於溶液參閱下面的鏈接https://material.angularjs.org/latest/demo/input

下面是示例代碼

<form name="userForm"> 
     <div layout-gt-xs="row"> 
      <md-input-container class="md-block" flex-gt-xs> 
      <label>Company (Disabled)</label> 
      <input ng-model="user.company" disabled> 
      </md-input-container> 
      <md-datepicker ng-model="user.submissionDate" md-placeholder="Enter date"> 
      </md-datepicker> 
     </div> 
     <div layout-gt-sm="row"> 
      <md-input-container class="md-block" flex-gt-sm> 
      <label>First name</label> 
      <input ng-model="user.firstName"> 
      </md-input-container> 
      <md-input-container class="md-block" flex-gt-sm> 
      <label>Long Last Name That Will Be Truncated And 3 Dots (Ellipsis) Will Appear At The End</label> 
      <input ng-model="theMax"> 
      </md-input-container> 
     </div> 
     <md-input-container class="md-block"> 
      <label>Address</label> 
      <input ng-model="user.address"> 
     </md-input-container> 
     <md-input-container md-no-float class="md-block"> 
      <input ng-model="user.address2" placeholder="Address 2"> 
     </md-input-container> 
     <div layout-gt-sm="row"> 
      <md-input-container class="md-block" flex-gt-sm> 
      <label>City</label> 
      <input ng-model="user.city"> 
      </md-input-container> 
      <md-input-container class="md-block" flex-gt-sm> 
      <label>State</label> 
      <md-select ng-model="user.state"> 
       <md-option ng-repeat="state in states" value="{{state.abbrev}}"> 
       {{state.abbrev}} 
       </md-option> 
      </md-select> 
      </md-input-container> 
</form>