기존 placeholder는 값을 입력을 해버리면 보이지 않아져버리기 때문에 input이 많으면, 어떤 입력값인지 혼란이 올 수 있다. 그래서 위에다 라벨을 붙여주고는 했는데 같은 값이 두 개인 것이 마음에 걸렸었다.


그러던 중 구글 로그인 폼을 보게 되었고 흉내를 내보았다. 구글 로그인 폼에서 소스보기로 찾고 싶었는데 어렵게 만들어져 있어서 다른 로그인 폼을 찾아보았다.
https://colorlib.com/wp/html5-and-css3-login-forms/
https://freshdesignweb.com/css-login-form-templates/
이 중에 구글 로그인 폼과 비슷한 효과를 가진 것이 있어서 그것을 참고하였다.
<style>
.test {position:relative;}
.inp {border:1px solid #ccc; padding-left:12px; font-size:17px; width:366px; height:54px; border-radius:4px; outline: 0;}
.placeholders {position:absolute;top:12px;left:8px;pointer-events:none;background-color:#fff; padding:0 3px; color:#888; font-size:17px; transition:all .4s;}
.inp:focus {border:2px solid #1a73e8;}
.inp:focus + .placeholders {top:-8px; font-size:12px; color:#1a73e8; transition:all .4s;}
.jsinp {border:2px solid #1a73e8 !important;}
.jsplaceholders {top:-8px; font-size:12px; color:#1a73e8; }
</style>
<div class='test'>
<input type='text' class='inp'>
<div class='placeholders'>이메일 또는 휴대전화</div>
</div>
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$('.inp').focusout(function() {
if( $(this).val() != '' ){
$(this).addClass('jsinp');
$(this).siblings('.placeholders').addClass('jsplaceholders');
}else{
$(this).removeClass('jsinp');
$(this).siblings('.placeholders').removeClass('jsplaceholders');
}
});
</script>
이메일 또는 휴대전화
포커스인을 했을때 위로 올리는 것까지는 쉬웠는데 값이 있을때 아래로 내려오지 않게 하는것은 javascript가 필요했다. 중복된 부분이 많아서 마음에 들지 않았다. javascript 혹은 css만으로 변경하는 법을 찾을 필요가 있는 것 같다.