[CSS] input, select 커스텀

디자인을 하거나 퍼블리싱을 할 때 전체적인 화면과 큰 덩어리를 구현하는 것도 중요하지만 사실 그 이전에 자잘한 ui에 대해서도 정의를 내려야한다. hover, checked, active 되었을 때 어떻게 변화하는지 생각하지 않으면 완성도는 당연히 떨어질 수 밖에 없다.
디자이너는 UI에 대한 이해가 있어야 할 것이고, 퍼블리셔는 디자이너가 만들어놓은 UI가이드를 최대한 구현할 수 있어야 할 것이다.

인풋 요소에 대해선 기존에 정리를 했었지만 모든 타입을 정리하진 않았었다. 하단의 링크를 참고하자.

📌 참고 자료
w3schools : HTML input type Attribute ,
티스토리 : input태그의 속성 & type의 속성값
velog : input 타입, 속성 총정리

아무튼 업무를 하면서 느낀 건 input과 select는 이미 모양이 만들어져있는 것들을 커스텀하는 거라 일반적인 태그보다 커스텀하기 귀찮고 까다로움.. 그래서 커스텀이 귀찮은 것들을 쫙 정리해보고 싶어졌다.

---

1. checkbox & radio

여러가지 방법이 있겠지만 나같은 경우는 이렇게 커스텀 하는 편

🔹 구조

기본적인 html 뼈대는 이렇게 짜고

<!-- 체크박스 -->
<div>
	<input type="checkbox" id="chk"><label for="chk">로그인 유지</label>
</div>

<!-- 라디오박스 -->
<div class="option-gender">
	<div class="gender">
		<input type="radio" id="check-male" name="gender">
		<label for="check-male">남성</label>
	</div>
	<div class="gender">
		<input type="radio" id="check-female" name="gender">
		<label for="check-female">여성</label>
	</div>
</div>

🔹 accent-color

단순히 색과 크기만 바뀐다면 커스텀이 복잡하진 않다

input[type="checkbox"] {
	width: 15px; height: 15px;
	accent-color: tomato;
}

🔹 모양 자체가 변해야할 때는 label을

기본 input은 안 보이게 처리하고 id 값으로 label과 기능 연결, 가상클래스 부여해 커스텀하면 된다.

/*기본 input 안 보이게 처리*/
input[type="checkbox"] {
	display: none;
}

/*label에 가상클래스 부여해 대신 박스 만들기*/
input[type="checkbox"] + label:before {
	content: '';
	display: inline-block;
	width: 15px; height: 15px;
	margin-right: 3px;
	vertical-align: middle;
	border: 1px solid #333;
	background: transparent;
}

/*체크되었을 때 변화*/
input[type="checkbox"]:checked + label:before {
	background: tomato url(../images/icon_check.png) no-repeat center;
	background-size: contain;
}

2. date

🔹 아이콘 변경

/* (1) 기본 아이콘을 안 보이게 처리하고 인풋 자체에 백그라운드를 넣어주는 방법 */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-inner-spin-button {
	display: none;
  appearance: none;
}
input[type="date"] {
	padding-right: 24px;
	background: url(../images/icon_date.png) right no-repeat;
	background-size: 24px;
}

/* (2) 또는 기본 아이콘을 커스텀 */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-inner-spin-button {
	display: block; 
	width: 24px;
	height: 28px; 
	background: url(../images/date_icon.png) center no-repeat;
	background-size: contain;
}

🔹 datepicker

datepicker를 css로만 커스텀할 수 있는 방법은 없다.
input type=text에 jquery나 react 플러그인을 사용하는 것 같은데, 당장에 쓸 일이 없어 나중에 더 깊게 파봐야겠다.

3. select

🔹 아이콘 변경

input type=date 와 방식이 같다. 기본 아이콘을 display: none; 하고 자체에 백그라운드를 넣어주는 방법

select {
	height: 30px; 
	-webkit-appearance: none; 
	-moz-appearance: none; 
	appearance: none;  
	background: url(../images/btn_select.png) right no-repeat;
}

🔹 option

datepicker와 마찬가지로 css로만 커스텀할 수 있는 방법은 없다. js가 필요함.

div 태그로 커스텀 select 만들기 - 원리가 이해되는 참고 자료
w3schools 커스텀 예시 - 정석적인 예제 (자바스립트로 기능 추가)
jquery를 이용하여 나만의 select menu style 만들기

참고 글을 읽어보니 대충 원리는 이러하다.
1. 우선 구조를 짜고

<div class="custom-select">
  <select>
    <option value="0">Select option:</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
</div>

2. <select> 는 display: none; 처리
3. select 역할을 할 <div>만들어 커스텀 혹은 js로 생성하는데 구조는 이렇다

<div class="custom-select">
	<select> <!-- 숨겨지는 기본 select -->
		<option value="0">Select option:</option>
		<option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
	</select>
  <div class="select-selected">Option 1</div> <!-- select 대체 -->
	<div class="select-items select-hide"> <!-- option 대체 -->
		<div class="same-as-selected">Option 1</div>
		<div>Option 2</div>
		<div>Option 3</div>
	</div>
</div>

4. selected, hover 등 상태에 따른 클래스를 만들고 js로 마우스 이벤트 따라 클래스 부여

아님 개발에 차질이 없는 거라면, 아래 방법이 간단하니 괜찮을 것 같다.

📌 select 없이 select 처럼 만들기
https://velog.io/@bbiyac/SelectBox-커스텀하기

4. 실무에서 겪었던 어려움

검색 상자를 구현해야할 때 인풋과 버튼을 배치해 구현했었는데 텍스트에 따라 크기가 맞춰져야 한다는 요청이 있었다.

인풋은 텍스트 양에 맞춰 늘었다 줄었다 할 수 없었고, 인풋박스처럼 보이는 디자인도 사실은 검색 버튼을 누르면 팝업 형태로 검색창이 따로 뜨는 형식이라 굳이 인풋을 고집하지 않아도 되었다. 그래서 p태그를 인풋창처럼 꾸밈 ..!
즉, 경우에 따라 input 대신 다른 요소로 그럴싸하게 꾸미기도 한다는 걸 알게 되었다!