반응형
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>
|
728x90
반응형
LIST
'마루아라는 개발쟁이 > CSS' 카테고리의 다른 글
| HTML 테이블(표)을 사용하지 않고 테이블 만들기 (0) | 2022.12.06 |
|---|
