HTML input 태그 커스텀 디자인 해보기 NO JavaScript!!!

2024-01-02

---

사진: Unsplash 의 Marek Piwnicki

---

1. HTML

 

<div class="search_wrap">
  <input type="text" class="search_txt"
         placeholder="상세 정보 입력 1">
</div>
<br>
<div class="search_wrap">
  <input type="text" class="search_txt"
         placeholder="상세 정보 입력 2">
</div>

---

2. CSS

 

/* input태그디자인 참고*/
.search_wrap {
    display: flex;
    width: 100%;
    padding: 0.625rem;
    align-items: center;
    gap: 0.625rem;
    border-radius: 0.75rem;
    border: 1px solid #DBDBDB;
    background: #FFF;

    box-sizing: border-box;
}

.search_txt, /* 여기서 시작 */

input[type="text"].search_txt {
    border: none;
    outline: none;
    color: #353535; /* 입력된 텍스트 색상 */
    background: transparent;
    font-size: inherit;
    padding: 0;
    margin: 0;
    width: 100%;
}

input[type="text"].search_txt::placeholder {
    color: #BABABA; /* Placeholder 색상 */
}
/********************/

---

메인 이미지 출처 : 사진: Unsplash의Marek Piwnicki