Firefox에서 작동하지 않는 CSS로 사용자 정의 선택

Question

선택 상자의 오른쪽 구석에있는 단추 (화살표 아래쪽)를 변경하고 싶습니다. CSS를보다

<div class="buscaSelect"> 
    <select name="oper"> 
     <option value="value1">Value 1</option> 
     <option value="value2">Value 2</option> 
    </select> 
</div> 

: 내 HTML은 다음과 같이이다

사파리에서

.buscaSelect { 
    display: inline-block; 
    margin: 18px 0px 0px 0px; 
    width: 120px; 
    height: 27px; 
    border-radius: 0px; 
    overflow: hidden; 
    background: white url("btnSelect.png") no-repeat right center; 
} 

.buscaSelect select { 
    padding: 4px; 
    width: 100%; 
    border: none; 
    box-shadow: none; 
    background: transparent; 
    background-image: none; 
    -webkit-appearance: none; 
} 

, 결과는 완벽, 기본 버튼의 "btnSelect.png"에 의해 변경되지만, 파이어 폭스에서 (58.0b9), 내 단추가 겹치는 기본 단추가 여전히 있습니다. 기본 버튼의 너비가 작아지면서 버튼의 모서리가 뒤쪽에 표시됩니다 ... 결과가 끔찍합니다!

Firefox 기본 버튼을 비활성화하고 광산 만 표시하려면 어떻게합니까?

Answer 1

당신이 이것을 찾고 있다고 생각합니다. 도움이되기를 바랍니다. 아무도 파이어 폭스와 크롬 잘 작동하지 않습니다하지만 IE 당신이 사용해야 할 수도 있습니다 : 나는 드롭 다운으로하고 비행사입니다 알레스카 반도 오지 웹킷 등장하여 드롭 다운 화살표 측없이 모두의 비교를 준

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

.buscaSelect { 
 
    display: inline-block; 
 
    margin: 18px 0px 0px 0px; 
 
    width: 120px; 
 
    height: 27px; 
 
    border-radius: 0px; 
 
    overflow: hidden; 
 
    background: white url("btnSelect.png") no-repeat right center; 
 
} 
 

 
.buscaSelect select { 
 
    padding: 4px; 
 
    width: 100%; 
 
    border: none; 
 
    box-shadow: none; 
 
    background: transparent; 
 
    background-image: none; 
 
    -webkit-appearance: none; 
 
} 
 

 
#noarrow { 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    text-indent: 1px; 
 
    text-overflow: ''; 
 
} 
 
select::-ms-expand { 
 
    display: none; 
 
}

<div class="buscaSelect"> 
 
    <select name="oper" id="noarrow"> 
 
     <option value="value1">Value 1</option> 
 
     <option value="value2">Value 2</option> 
 
    </select> 
 
</div> 
 
<div class="buscaSelect"> 
 
    <select name="oper"> 
 
     <option value="value1">Value 1</option> 
 
     <option value="value2">Value 2</option> 
 
    </select> 
 
</div>

을