본문 바로가기
웹디자인,퍼브리싱/CSS

CSS - select박스 화살표 없애기 / 셀렉트박스 화살표꾸미기

by 아이엠맘 2021. 7. 2.
728x90
반응형

이렇게 화살표 이미지 넣어 보여주고 싶은데

이렇게 떠요~~~

없애고 싶은데 어떻게???

아래 내용 스타일에 넣어주면

크롬에서

-webkit-appearance:none; -moz-appearance:none

익스(10부터 됨)

select::-ms-expand { display: none; }

이렇게 잘떠요~~~


화살표 이미지 꾸미기

select {
    height: 36px;
    padding-left: 9px;
    padding-right: 35px;
    border: 1px solid #e0e0e0;
    border-radius: 2px;
    background: #fff url(이미지주소) no-repeat 0 -324px;
    background-position-x: right;
    font-size: 13px;
    line-height: 30px;
    vertical-align: top;
    outline: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
}
 select::-ms-expand { display: none; }
728x90
반응형