[styled components] select 태그 placeholder 색상 설정

색상 설정

const SelectInput = styled.select`
    color: ${(props) => props.value === "default" ? "#8b8b8b" : "#000000"};
`
const StyledOption = styled.option`
    color: #000000;
`

styled-components 부분은 이렇게 정의하고, placeholder로 설정할 option의 색은 "#8b8b8b" 부분에 적어주면 된다.

나머지 option은 Option 컴포넌트를 사용하면 된다.

<Select value={color || "default"} onChange={handleChange}>
    <option value="default" hidden>숫자를 선택해주세요</option>
    <Option value={one}>1</Option>
    <Option value={two}>2</Option>
    <Option value={three}>3</Option>
</Select>