CSS) 검색창에 아이콘, 이모티콘 넣기

Html,Css/Css

CSS) 검색창에 아이콘, 이모티콘 넣기

YG - 96년생 , 강아지 있음, 개발자 희망 2021. 5. 27. 14:25

검색창에 이모티콘 넣는 법

<div class="search-bar">
          <i class="fas fa-search"></i>
          <input class="search-bar__input" type="search" placeholder="검색" />
        </div>

이모티콘과 input 기능이 함께 나오는데 검색창 안으로 넣고 싶을 때는

.search-bar {
  width: 220px;
  height: 27px;
  border-radius: 5px;
  border: solid 1px rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  opacity: 1;
}

먼저 search-bar 의 너비 , 높이 그리고 flex 를 사용하고 center를 사용합니다

그 이후

.search-bar__input {
  width: 50px;
}

width 값을 주어서 search-bar 보다 작게 하여 center에 위치하게 하며

/* .search-bar__input {
  width: 50px;
  border: none; // 검색창 border 을 없앰으로써 자연스러워짐
  -webkit-appearance: none; // 기본 search 디자인을 없앰
  text-align: center;
  margin-left: 10px;
  overflow: auto; //검색어가 길어졌을때 오른쪽으로 자연스럽게 검색되도록 하기 위해
  z-index: -1;
  font-size: 15px;
} */

최종적으로

.search-bar {
  width: 220px;
  height: 27px;
  border-radius: 5px;
  border: solid 1px rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  opacity: 1;
}
.search-bar__input {
  width: 50px;
  border: none;
  -webkit-appearance: none;
  text-align: center;
  margin-left: 10px;
  overflow: auto;
  z-index: -1;
  font-size: 15px;
}


.search-bar__input:focus {
  outline: none;
  width: 300px;
  text-align: left;
}

.fa-search {
  font-size: 15px;
}