帶有標籤的Css文本輸入效果

Question

我有一個文本輸入字段，其中嵌入了一些標籤文本。當用戶單擊以在字段中鍵入時，焦點上我將標籤文本縮放一點並將其移向文本字段的頂部。 它一切正常，直到你移到下一個輸入字段。然後，您剛剛輸入一個值的字段將變回默認的比例和位置。但是，我希望它在用戶鍵入內容後保留在那裏。任何幫助，將不勝感激。

form { 
 
    width: 100%; 
 
    text-align: center; 
 
    padding: 45px 0; 
 
} 
 
form div { 
 
    background: transparent; 
 
    height: 55px; 
 
    width: 100%; 
 
    margin-bottom: 55px; 
 
    position: relative; 
 
} 
 
input { 
 
    width: 80%; 
 
    height: 78px; 
 
    border-radius: 25px; 
 
    border-top: 4px solid #0275F5; 
 
    border-right: 4px solid #0275F5; 
 
    border-left: 4px solid #0275F5; 
 
    border-bottom: 4px solid #0275F5; 
 
    outline: 0; 
 
    font-size: 1.6em; 
 
    font-weight: bold; 
 
    display: block; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 
.formHeading { 
 
    font-size: 2.6em; 
 
    color: #0275F5; 
 
    text-transform: uppercase; 
 
    text-align: center; 
 
    margin-top: 0; 
 
} 
 
form div label { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    padding: 0 0.25em; 
 
    width: 100%; 
 
    height: calc(100% - 1em); 
 
    text-align: center; 
 
    pointer-events: none; 
 
    transition: .25s; 
 
    text-transform: uppercase; 
 
    font-size: 1.6em; 
 
} 
 
input:focus + label { 
 
    transform: translate3d(0, -.8em, 0) scale3d(0.55, 0.55, 1); 
 
}

<div id="wrapper"> 
 
    <h1 class="formHeading">Sign Up Form</h1> 
 
    <form action="index.html" method="post"> 
 
    <div> 
 
     <input type="text" name="user_name" id="name"> 
 
     <label>Name</label> 
 
    </div> 
 
    <div> 
 
     <input type="email" name="user_email" id="email"> 
 
     <label>Email Address</label> 
 
    </div> 
 
    <div> 
 
     <input type="password" name="user_password" id="password"> 
 
     <label>Password</label> 
 
    </div> 
 
    <div> 
 
     <input type="text" name="user_city" id="city"> 
 
     <label>City</label> 
 
    </div> 
 
    <div> 
 
     <input type="text" name="user_gender" id="gender"> 
 
     <label>Gender</label> 
 
    </div> 
 
    </form> 
 
</div>

Answer 1

我不認爲這是可以無javascript來實現（編輯：我看你加jquery和javascript，所以這個要求不應該是一個問題）。據我所知，沒有辦法在CSS中輸入輸入內容，所以你需要JS爲這些輸入添加一個類。

這是一個使用jQuery的解決方案的草稿，但您也可以使用普通JS做到這一點。

$('input').blur(function() { 
 
    console.log($(this).val()); 
 
    if ($(this).val() !== '') { 
 
    $(this).addClass('hasvalue') 
 
    } else { 
 
    $(this).removeClass('hasvalue'); 
 
    } 
 
});

form { 
 
    width: 100%; 
 
    text-align: center; 
 
    padding: 45px 0; 
 
} 
 
form div { 
 
    background: transparent; 
 
    height: 55px; 
 
    width: 100%; 
 
    margin-bottom: 55px; 
 
    position: relative; 
 
} 
 
input { 
 
    width: 80%; 
 
    height: 78px; 
 
    border-radius: 25px; 
 
    border-top: 4px solid #0275F5; 
 
    border-right: 4px solid #0275F5; 
 
    border-left: 4px solid #0275F5; 
 
    border-bottom: 4px solid #0275F5; 
 
    outline: 0; 
 
    font-size: 1.6em; 
 
    font-weight: bold; 
 
    display: block; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 
.formHeading { 
 
    font-size: 2.6em; 
 
    color: #0275F5; 
 
    text-transform: uppercase; 
 
    text-align: center; 
 
    margin-top: 0; 
 
} 
 
form div label { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    padding: 0 0.25em; 
 
    width: 100%; 
 
    height: calc(100% - 1em); 
 
    text-align: center; 
 
    pointer-events: none; 
 
    transition: .25s; 
 
    text-transform: uppercase; 
 
    font-size: 1.6em; 
 
} 
 
input:focus + label, 
 
input.hasvalue + label { 
 
    transform: translate3d(0, -.8em, 0) scale3d(0.55, 0.55, 1); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <h1 class="formHeading">Sign Up Form</h1> 
 
    <form action="index.html" method="post"> 
 
    <div> 
 
     <input type="text" name="user_name" id="name"> 
 
     <label>Name</label> 
 
    </div> 
 
    <div> 
 
     <input type="email" name="user_email" id="email"> 
 
     <label>Email Address</label> 
 
    </div> 
 
    <div> 
 
     <input type="password" name="user_password" id="password"> 
 
     <label>Password</label> 
 
    </div> 
 
    <div> 
 
     <input type="text" name="user_city" id="city"> 
 
     <label>City</label> 
 
    </div> 
 
    <div> 
 
     <input type="text" name="user_gender" id="gender"> 
 
     <label>Gender</label> 
 
    </div> 
 
    </form> 
 
</div>