thisyujeong.dev

placeholder 기능 추가

<select name="role" class="select" required>
  <option value="" disabled selected>옵션을 선택하세요.</option>
  <option value="1">옵션1</option>
  <option value="2">옵션2</option>
  <option value="3">옵션3</option>
</select>

placeholder 로 넣어줘야 할 option을 추가하고 value 속성은 빈 문자로 넣어준다.

disabled 속성과 selected 속성을 적용했다. disabled 는 option을 펼쳤을 때 선택하지 못하게 하기 위함이고 selected 속성은 처음 페이지가 렌더되었을 때 기본으로 선택되어 있도록 하기 위함이다. 선택되어 있어야 placeholder 로 띄울 수 있다.

placeholder 컬러 지정

.form_select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
 
  &::-ms-expand {
    display: none;
  }
 
  option[value=''] {
    display: none;
  }
 
  &:required:invalid {
    // required 필수값을 지정하고 유효하지 않다면 컬러를 변경
    color: #6f7e99;
  }
}

placeholder 용으로 넣은 option은 옵선 목록에 보이지 않도록 속성 선택자를 이용하여 value 가 빈값인 요소를 찾아 보이지 않도록 한다.

select 태그의 required 와 invalid 속성을 사용해 컬러값을 지정했는데 이는 필수로 옵션이 선택되어야 하며 유효하지 않다면 컬러를 변경하여 옵션 목록과 다른 컬러를 지정할 수 있게된다,

invalid 는 placeholder용 옵션을 disabled & selected 로 설정했기 때문에 유효하지 않은 값으로 인식한다.