带有标签的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>