input에 transiton 속성으로 이쁜 입력창 만들기

팀프로젝트하면서  input박스에 trasition으로 효과를 주었더니 다들 마음에 들어하셔서

다시 기억하고 정리하고자 쓰는 글

 

---

※ input박스를 클릭하면 placeholder가 위로 이동하고 글씨가 입력되는 효과주기

<div class="div-input">
    <input type="text" class="login-input" required>
    <label class="label-input">아이디</label>
    <span class="span-input"></span>  #밑줄에 이벤트주기위해 생성하였음
</div>

▷  <div>태그 안에

 <input>과 <label>태그를 적어준다.

 (placeholder로 착각 할 수 있지만 label태그로 표시하고자 하는 이름을 따로 작성)

▷input태그의 requried은

폼데이터가 서버로 제줄되기전에 반드시 채워져야 하는 입력필드를 명시하는 속성 css에서 valid를 줄꺼기 때문에 적어줌

 

.login-input{
    height:50px;
    width:100%;
    background-color: transparent;
    border: none;                               #처음 input style
    border-bottom: 1px solid #e5e5e5;

    &:focus {              
        outline: none;                          #input focus시 테두리x
      }
    &:focus ~ .label, &:valid ~ .label {         #login-input:focus 요소 뒤를 따르는 모든label과
        font-size: 16px;
        bottom: 40px;                            #login-input:valid 요소 뒤를 따르는 모든label에 해당 
        color: #666;
        font-weight: bold;                       #style적용
        }
        
    &:focus ~ .span, &:valid ~ .span {
        width: 100%;
        }
}
.div-input {
    position: relative;
    margin-top:10px;
    }
    
.label-input {
    position: absolute;
    color: #aaa;
    left: 0px;
    font-size: 15px;
    bottom: 8px;
    transition: all .2s;
    }

 

오류

지금보니 input박스의 label을 클릭하면 focus가 반응하지않는다..

해결

label 텍스트 컴포넌트가 input을 막고 있으므로 label의 for속성과 input의 id 속성을 연결해주어야했다.

 

<div class="div-input">
    <input type="text" class="login-input" id="id"required>
    <label class="label-input" for="id">아이디</label>
    <span class="span-input"></span>  #밑줄에 이벤트주기위해 생성하였음
</div>