디자인 된 <select />에 placeholder 개념이 있어서 어떻게 하면 좋을지 찾아봤다. 간략하게 설명하자면 선택이 불가능하게 disabled 추가하고 hidden으로 숨김 마지막으로 selected로 디폴트값을 처리하면 완성.

function Select({ placeholder, children }) {
  return (
    <select>
      <option value="" disabled hidden selected>
        {placeholder}
      </option>
      {children}
    </select>
  );
}

---

• How do I make a placeholder for a ‘select’ box?

Under-Engineered Select Menus | Adrian Roselli

• font, letter-spacing, word-spacing 상속
• appearance 화살표 수정
• 상태(focus, required, invalid)에 따른 스타일 추가

Building a multi-select component

다중 선택 UI를 구현하기위해서 checkbox, select 두가지 방법으로 작업하는 방식을 소개하고 있다. 그외 선택된 상태값을 얻기위한 counter() 함수, 모바일 체크를 위한 미디어쿼리도 알려주고 있다.

aside {
  counter-reset: filters;

  & :checked {
    counter-increment: filters; 
  }

  &::after {
    content: counter(filters);
  }
}

@media (pointer: coarse) {
  // 
}

https://developer.chrome.com/docs/css-ui/css-field-sizing?&hl=ko

field-sizing를 사용하면 콘텐츠를 기반으로 크기 조절을 사용 설정하는 데 CSS 한 줄이 필요합니다. 이 콘텐츠 기반 크기 조절 스타일은 textarea 외에도 다른 요소에도 적용됩니다.

textarea, select, input { field-sizing: content; }