드롭 다운 화살표를 숨기는 올바른 "-moz-appearance"값은 무엇입니까?

드롭 다운 화살표를 숨기는 올바른 "-moz-appearance"값은 무엇입니까?CSS로만 <select> 요소의 드롭 다운 화살표 스타일을 지정하려고합니다. Chrome / Safari에서 완벽하게 작동합니다. select {-webkit-appearance : button; -webkit-border-radius : 2px; -webkit-box-shadow : 0px 1px 3px rgba (0, 0, 0, 0.1); -webkit-padding-end : 20px; -webkit-padding-start : 2px; -webkit-user-select : 없음; 배경 이미지 : url ( './ select-arrow1.png'); 배경 위치 : 중앙 오른쪽; 배경 반복 : 반복 없음; 테두리 : 1px 단색 #AAA; 여백 : 0; padding-top : 2px; padding-bottom : 2px; 너비 : 200px; } 여기에서 볼 수있는 것처럼 아름답게 렌더링됩니다.이 논리에 따르면 Firefox에서 작동하도록하려면 모든 -webkit- * 항목을 -moz- *로 추가해야했습니다. -moz-appearance : button; -moz-border-radius : 2px; -moz-box-shadow : 0px 1px 3px rgba (0, 0, 0, 0.1); -moz-padding-end : 20px; -moz-padding-start : 2px; -moz-user-select : 없음; 99 %에서 작동합니다. 유일한 문제는 기본 드롭 다운 화살표가 사라지지 않고 여기에서 볼 수 있듯이 배경 이미지 위에 유지된다는 것입니다. -moz-appearance : button; <select> 요소에는 작동하지 않습니다. 또한 -moz-appearance : 없음; 기본 드롭 다운 화살표를 제거하는 데 효과가 없습니다. 그렇다면 기본 드롭 다운 화살표를 제거하기위한 -moz-appearance의 올바른 값은 무엇입니까? 업데이트 : 2014 년 12 월 11 일 : 새로운 해킹 개발 중단. 4 년 반이 지난 후에 -moz-appearance : none은 Firefox 35 이후로 작동하기 시작했습니다. moz-appearance : button은 여전히 ​​손상되었지만 어쨌든 사용할 필요가 없습니다. 다음은 매우 기본적인 작업 예입니다. 2014 년 4 월 28 일 : 언급 된 CSS 해킹은 몇 달 동안 작동했지만 2014 년 4 월 초부터이 버그는 모든 플랫폼에서 Firefox 31.0.a1 Nightly로 돌아 왔습니다. 얘들 아! 결정된! https://bugzilla.mozilla.org/show_bug.cgi?id=649849 또는 해결 방법 궁금한 사람 : https://bugzilla.mozilla.org/show_bug.cgi?id=649849#c59 먼저 버그에는 적대적인 스팸이 많이 포함되어 있으며 이에 할당 된 모든 사람에게 적대적인 업무 공간을 만듭니다. 둘째,이를 수행 할 수있는 사람 (재 작성 포함)은 당분간 다른 프로젝트 (b2g)에 할당되었으며 해당 프로젝트가 완료 될 때까지 시간이 없습니다. 셋째, 그 사람이 다시 시간을 가지더라도 이것이 우선 순위가 될 것이라는 보장은 없습니다. 작동 방식에 대한 사양을 위반합니다 (내가 말한 내용이며 사양을 개인적으로 알지 못함) 이제 https://wiki.mozilla.org/B2G/Schedule_Roadmap을 참조하십시오.) 페이지가 더 이상 존재하지 않고 버그는 수정되지 않았지만 허용 가능한 해결 방법은 João Cunha에서 나왔습니다. 감사합니다. 업데이트 : Firefox v35에서 수정되었습니다. 자세한 내용은 전체 요점을 참조하십시오. == Firefox에서 선택 화살표를 숨기는 방법 == 방법을 알아 냈습니다. 트릭은 -prefix-appearance, text-indent 및 text-overflow를 혼합하여 사용하는 것입니다. 순수한 CSS이며 추가 마크 업이 필요하지 않습니다. 선택 {-moz-appearance : none; 텍스트 들여 쓰기 : 0.01px; 텍스트 오버플로 : ''; } 짧게 말하면, 오른쪽으로 약간 밀면 오버플로가 화살표를 제거합니다. 꽤 깔끔 하죠? 내가 방금 쓴이 요점에 대한 자세한 내용. Ubuntu에서 테스트되었습니다. Mac 및 Windows, 모두 최신 Firefox 버전. 기본 드롭 다운 화살표를 제거하려면 다음을 사용하십시오. -moz-appearance : window; opacity : 0을 넣어보십시오. 선택한 요소는 표시되지 않지만 클릭하면 옵션이 표시됩니다. Mac OS에서 -moz-appearance : window; https://developer.mozilla.org/en-US/docs/CSS/-moz-appearance에서 MDN 문서에 따른 화살표를 제거합니다. Mac OS X 10.8.2의 Firefox 13에서 테스트되었습니다. https://bugzilla.mozilla.org/show_bug.cgi?id=649849#c21도 참조하십시오. FF35의 수정을 기다리는 동안 아래 두 가지 옵션을 시도해 볼 가치가 있습니다. select {-moz-appearance : scrollbartrack-vertical; } 또는 {-moz-appearance : treeview; } 선택 요소의 사용자 지정 스타일에 넣은 화살표 배경 이미지를 숨 깁니다. 따라서 브라우저 화살표와 사용자 정의 화살표의 끔찍한 콤보 대신 늪지 표준 브라우저 화살표를 얻습니다. 아직 Firefox에서 드롭 다운 화살표를 제거 할 수는 없지만 (MatTheCat의 게시물 참조), "스타일 화 된"배경 이미지가 Firefox에 표시되지 않도록 숨길 수 있습니다. -moz-background-position : -9999px -9999px! important; 그러면 Webkit에서 스타일 화 된 버전을 유지하면서 기본 선택 상자 화살표가 그대로 유지되어 프레임 외부에 배치됩니다. 추가 할 때 작동합니다. {width : 115 %} 참고 URL : https://stackoverflow.com/questions/6787667/what-is-the-correct-moz-appearance-value-to-hide-dropdown-arrow- 선택의 Firefox에 표시되는 배경 이미지입니다. -moz-background-position : -9999px -9999px! important; 그러면 Webkit에서 스타일 화 된 버전을 유지하면서 기본 선택 상자 화살표가 그대로 유지되어 프레임 외부에 배치됩니다. 추가 할 때 작동합니다. {width : 115 %} 참고 URL : https://stackoverflow.com/questions/6787667/what-is-the-correct-moz-appearance-value-to-hide-dropdown-arrow- 선택의 Firefox에 표시되는 배경 이미지입니다. -moz-background-position : -9999px -9999px! important; 그러면 Webkit에서 스타일 화 된 버전을 유지하면서 기본 선택 상자 화살표가 그대로 유지되어 프레임 외부에 배치됩니다. 추가 할 때 작동합니다. {width : 115 %} 참고 URL : https://stackoverflow.com/questions/6787667/what-is-the-correct-moz-appearance-value-to-hide-dropdown-arrow- 선택의