셀렉트 박스 css

 

셀렉트 박스 기본 css

select {
	background: url(이미지경로) no-repeat right center;
	-webkit-appearance: none; /* 네이티브 디자인 안보이게*/
    -mox-appearance: none;
    appearance:none;
    cursor : pointer;
}

select::-ms-expand { /* ie 10,11 화살표 숨기기*/
	display : none;
}

 

브라우저마다 셀렉트 화살표 모야이 다르게 보이기 때문에 안보이게 하고 bg 이미지를 넣어서 적용합니다.

화살표 이미지는 셀렉트 박스 오른쪽에 붙어서 표출되기 때문에 

화살표 아이콘을 만들때 미리 여백을 줘서 만들도록 합니다

 

위 방법은 브라우저에 따라서 적용이 안될 수 있습니다.

옵션도 css로 수정 불가능 하기 때문에 수정하려면 스크립트를 사용해야 합니다.

 

label이 있다면 기본 셀렉트는 안보이게 하고 label에 스타일을 적용해서 셀렉트 박스를 만들 수 있습니다.