技術標籤：csshtmlcss3

<div class="login-wrapper">
   <form class="login" action="" method="">
       <div class="form-group">
           <div class="form-group__control">
               <input type="text"
 
 name="account" id="account" required autocomplete="off">
               <label for="account">Account</label>
           </div>
           <div class="form-group__error"></div>
       </div>
       <div class="
 
form-group">
           <div class="form-group__control">
               <input type="password" name="password" id="password" required autocomplete="off">
               <label for="password">Password</label>
           </
 
div>
           <div class="form-group__error"></div>
       </div>
   </form>
</div>

*{margin: 0; padding: 0;}

        .login-wrapper{
            margin: 200px auto;
            width: 400px;
            outline: 1px solid red;
        }

        .login {
            position: relative;
            padding: 30px;
            background-color: #ffffff;
        }
        
        /* .form-group {
            
        } */

        .form-group .form-group__control {
            position: relative;
            height: 35px;
        }

        .form-group .form-group__control input{
            z-index: 1;
            display: block;
            position: relative;
            padding: 0 10px;
            width: 100%;
            height: 35px;
            line-height: 35px;
            box-sizing: border-box;
            font-weight: 400;
            font-size: 16px;

            background: none;
            border: 2px solid #acacac;

            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            -ms-border-radius: 5px;
            -o-border-radius: 5px;
            border-radius: 5px;
        }

        .form-group .form-group__control label {
            display: inline-block;
            position: absolute;
            top: 50%;
            left: 10px;
            color: #acacac;
            font-size: 16px;
            z-index: 2;
            
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            transform: translateY(-50%);

            -webkit-transition: all .2s ease-out;
            -moz-transition: all .2s ease-out;
            -o-transition: all .2s ease-out;
            transition: all .2s ease-out;
        }

        /* input 獲得焦點  和  input 填寫的值符合要求觸發 */
        .form-group .form-group__control input:focus,
        .form-group .form-group__control input:valid{
            outline: none;
            border: 2px solid #00aced;
        }

        .form-group .form-group__control input:focus + label,
        .form-group .form-group__control input:valid + label {
            top: -7%;
            font-size: 16px;
            color: #00aced;
            background-color: #ffffff;
        }

        .form-group .form-group__error {
            height: 30px;
            padding: 0 10px;
            text-align: justify;
            line-height: 16px;
            font-size: 14px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: red;
        }