フォームのラベルをフォーカスされたときにinputタグの上に表示させるアニメーションを作りたいですがラベルの非表示の切り替え方がわかりません
今のソースコードはこのようになってますが問題があります
1つはフォーカスしていないときでもラベルが非表示になっていないことです。どのようにすればうまく実装できるのかわかりませんでした
2つはラベルが2つありますが、2つとも同じ位置に行ってしまうことです。これもどうやって制御して位置を対応させればいいのかがわかりませんでした
jqueryを使っていますがJavascriptやCSSのみの方法でも構いませんのでご回答お願い致します。
$(document).ready(function() {
$('.form-group input').on('focus', function() {
$(this).siblings('label').addClass('active');
});
$('.form-group input').on('blur', function() {
if (!$(this).val() && !$(this).attr('required')) {
$(this).siblings('label').removeClass('active');
}
});
});
.form-group input {
position: relative;
}
.form-group label {
position: absolute;
left: 0;
top: 120%;
transform: translateY(-50%);
font-size: 1rem;
color: gray;
pointer-events: none;
transition: 0.9s ease-out all;
z-index: 2;
}
.form-group input:focus+label,
.form-group input:valid+label {
top: 0;
font-size: 0.75rem;
color: #555;
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<form>
<div class="form-group">
<div class="row">
<div class="col">
<input type="text" id="firstname" name="username" class="form-control" required>
<label for="username">ユーザー名</label>
</div> <br> <br> <br>
<div class="col">
<input type="text" id="lastname" name="lastname" class="form-control" required>
<label for="email">メールアドレス</label>
</div>
</div>
</div>
<br>
</form>