HTML Input 기본 버튼 아이콘 숨기기

 

html input 타입에 따른 기본 버튼이나 아이콘들이 보일 경우 디자인된 input 요소들의 모습과 다를 수 있습니다. 이럴때는 기본으로 제공되는 HTML Input의 버튼이나 아이콘들을 CSS 사용해 다음과 같이 숨길 수 있습니다.

 

숫자 증가/감소 버튼 숨기기

/* 웹킷 브라우저 (예: 크롬, 사파리)용 */
input[type="number"]::-webkit-inner-spin-button, 
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox 브라우저용 */
input[type="number"] {
  -moz-appearance: textfield;
}

 

검색 입력 상자의 둥근 모서리와 'x(입력 내용 삭제)' 아이콘 숨기기

/* 웹킷 브라우저용 */
input[type="search"]::-webkit-search-clear-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

 

캘린더와 시간 관련 아이콘 숨기기

/* 웹킷 브라우저용 */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  display: none;
}

 

비밀번호 입력 상자의 '비밀번호 보기' 아이콘 숨기기 (Edge 브라우저에서만 해당)

input[type="password"]::-ms-reveal {
  display: none;
}

 

select 요소 화살표 숨기기

/* 웹킷 브라우저 (예: 크롬, 사파리)용 */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
}

 

File 선택 커스텀화 하기

파일업로드의 경우 브라우저마다 다르게 표현하는 모습의 차이가 크기 때문에 대부분 커스터마이징을 하여 사용합니다.
공통적으로 사라지게 하는 방법이 따로 존재하지 않고 기본적인 display 속성을 사용하여 기본 업로드버튼을 보이지 않게 만들고 label 요소와 CSS를 사용하여 디자인을 커스터 마이징 하고 자바스크립트로 선택한 파일의 이름을 보여지게 만듭니다.

<div class="custom-file-upload-wrap">
  <input type="text" id="file-name" class="custom-file-upload-name" />
  <label for="file-upload" class="custom-file-upload">파일 선택</label>
  <input id="file-upload" type="file" />
</div>

document.getElementById("file-upload").addEventListener("change", function () {
  const fileName = this.files[0].name;
  document.getElementById("file-name").value = fileName;
});

.custom-file-upload-wrap {
  display: flex;
  align-items: center;
}
.custom-file-upload {
  padding: 10px;
  border: 1px solid #ccc;
  display: inline-block;
  cursor: pointer;
  background-color: #f2f2f2;
  font-weight: bold;
  margin-left: 5px;
}

.custom-file-upload-name {
  padding: 10px;
  border: 1px solid #ccc;
  display: inline-block;  
}

.custom-file-upload:hover {
  background-color: #e0e0e0;
}