[HTML/CSS] Select Box 기본값, 화살표 없애기

1. HTML에서 아래 '=====선택하세요====='와 같이 Select Box 기본값을 설정하는 방법입니다.

HTML :

 

사과 바나나 포도 키위

<select class="fruit" name="fruit">
	<option hidden="" disabled="disabled" selected="selected" value="">=====선택하세요=====</option>
	<option value="사과">사과</option>
	<option value="바나나">바나나</option>
	<option value="포도">포도</option>
	<option value="키위">키위</option>
</select>

저는 여기서 '=====선택하세요=====' 부분을 input태그의 placeholder와 같이 쓰고싶어서 CSS를 수정했습니다!

CSS:

select:required:invalid{
    color:gray;
}

2. 화살표 없애는 방법(CSS)

사과 바나나 포도 키위

select {
    -webkit-appearance:none; /* 크롬 화살표 없애기 */
    -moz-appearance:none; /* 파이어폭스 화살표 없애기 */
    appearance:none /* 화살표 없애기 */
}

3. 글자가 가운데 오게 하고 싶다면?(CSS)

사과 바나나 포도 키위   사과 바나나 포도 키위

사과 바나나 포도 키위   사과 바나나 포도 키위

select {
	text-align-last: center;
}