selectbox CSS 셀렉트박스 CSS 이쁘게 변경하기

HTML 문서내에 아래와 같이 셀렉트박스(selectbox ) 를 사용할 경우 

 

 

 

<select>

<option>첫번째 선택항목</option>

<option>두번째 선택항목</option>

<option>세번째 선택항목</option>

</select>

 

 

 

 

별도로 CSS 를 설정하지 않을경우 아래와 같이 표기되는데요,

 

 

 

 

이를 아래와 같이 좀더 크고, 오른쪽에 화살표가 보이도록 변경하려고 할때 사용할 수 있는 CSS 를 알려드립니다

 

 

 

<style>

select {

width: 200px;

padding: .8em .5em;

border: 1px solid #999;

font-family: inherit;

background: url('arrow.jpg') no-repeat 95% 50%;

border-radius: 0px;

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

}

</style>

 

 

 

 

여기까지 하게되면 크롬에서는 제대로 보이지만 익스플로러 에서는 아래와 같이 화살표가 겹쳐서 보이는 경우가 있습니다. 이는 익스플로러의 기본 화살표가 보여지기 때문에 이미지가 겹쳐보이게 되는 것입니다

 

 

 

 

이를 없애기 위해서는 다음과 같은 코드를 추가해 주면 됩니다.

 

select::-ms-expand {

display: none;

}

 

 

 

 

여기까지 하게되면 아래와 같이 제대로 보이게 됩니다

 

 

 

 

첨부파일로 화살표 이미지를 올려드립니다. 다운로드 받아서 사용하시면 됩니다.

 

 

 

다음은 전체 소스코드 입니다

 

 

<style>

select {

width: 200px;

padding: .8em .5em;

border: 1px solid #999;

font-family: inherit;

background: url('arrow.jpg') no-repeat 95% 50%;

border-radius: 0px;

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

}

 

select::-ms-expand {

    display: none;

}

</style>

<select>

<option>첫번째 선택항목</option>

<option>두번째 선택항목</option>

<option>세번째 선택항목</option>

</select>

 

 

참고로 저 동해둘리가 직접 운영하는 '성공하는 중이다'  카페를 소개드립니다. 

각자의 분야에서 성공을 향해 가는 과정에서 힘이되는 이야기, 힘이되는 사진, 성공스토리, 실패스토리 등을 나누고자 합니다. 많은 참여 부탁드려요

 

https://cafe.naver.com/ingsuccess

성공하는 중이다 : 네이버 카페