Search Input - Expanding Event

CSS 서치 박스 구현 하기

 

 

 

코드

 

HTML

<input
type="search"
class="search"
placeholder="Search"
/>

 

 

CSS

Before expanded

.search {
    border: none;
    height: 36px;
    width: 36px;
    border-radius: 18px; /* half of 36, to make it circular */
    padding-left: 36px;

    /* left position: 10px, bg size: 16px */
    background: url(./Shape.svg) no-repeat 10px/16px, white; 

    cursor: pointer;
}

After expanded

.search {
  transition-property: width, border-radius, box-shadow;
  transition-duration: 300ms;
}

.search:focus {
    width: 200px;
    border-radius: 4px;
    
    box-shadow: 0 0 0 2px #9c478a;
    outline: none;

    cursor: auto;
}