<style>
body{
font-family: sans-serif;
}
.input_group{
position: relative;
padding-top: 13px;
}
.input_group input{
border: 1px solid lightgrey;
border-radius: 5px;
outline: none;
min-width: 250px;
padding: 15px 20px;
font-size: 16px;
transition: all .1s linear;
-webkit-transition: all .1s linear;
-moz-transition: all .1s linear;
-webkit-appearance:none;
}
.input_group input:focus{
border: 2px solid #3951b2;
}
.input_group input::placeholder{
color:transparent;
}
.input_group label{
pointer-events: none;
position: absolute;
top: calc(50% - 8px);
left: 15px;
transition: all .1s linear;
-webkit-transition: all .1s linear;
-moz-transition: all .1s linear;
background-color: white;
padding: 5px;
box-sizing: border-box;
}
.input_group input:required:invalid + label{
color: red;
}
.input_group input:focus:required:invalid{
border: 2px solid red;
}
.input_group input:required:invalid + label:before{
content: '*';
}
.input_group input:focus + label,
.input_group input:not(:placeholder-shown) + label{
font-size: 13px;
top: 0;
color: #3951b2;
}
</style>
<div class="input_group">
<input type="text" placeholder=" "/>
<label>아이디</label>
</div>
<br/>
<div class="input_group">
<input type="password" placeholder=" " required/>
<label>비밀번호</label>
</div>
결과보기
tofanelli 님 https://codepen.io/tofanelli/pen/Ormgrz
