투명 선택을 클릭하십시오. 파이어 폭스에서 작동하지 않습니다.

Question

기본 선택을 없애려고 노력하고 있습니다. 내 사이트의 스타일에 더 일치하는 것을 사용하려고합니다.

나는 선택을 감싸기 위해 <button>을 만들었습니다. 불투명도 : 0 및 절대 위치 지정 및 크기 조정을 통해 버튼에 맞 춥니 다. 일부 jquery와 함께 활성화 된 옵션이 <span>의 버튼 텍스트로도 표시되도록 만들었습니다. 꽤 멋져 보인다.

문제는 크롬과 사파리가 완벽하게 작동한다는 것입니다. 파이어 폭스에서는 완벽하지 않습니다!

웹킷 보이지 않더라도 선택을 클릭하십시오. moz do not (IE와 Opera에 대해 매우 궁금합니다.) http://jsfiddle.net/bakaburg1/YyvRf/2/

어떤 도움을 환영합니다 : 정말 ...이 문제를 해결하는 방법은 다음과

문제의 재생과 함께 바이올린을 모른다.

Answer 1

당신은 <div> 대신

<button>의를 사용할 수 있습니다 HTML :

.btn.btn-small{ 
    padding-bottom: 2px; 
    padding-top: 2px; 
    color: #737373; 
    font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; 
    font-size: 14px !important; 
    font-variant: small-caps; 
    font-weight: bold; 
} 

.btn.select-container { 
    position: relative; 
    padding-right: 24px; 
} 

.btn.select-container select { 
    position: absolute; 
    top: -1px; 
    left: 0; 
    height: 117%; 
    width: 100%; 
    opacity: 0; 
    filter: alpha(opacity=0); 
    z-index: 1000; 
} 

select.btn { 
    width: initial; 
    height: 23px; 
    padding-right: 20px; 
    -webkit-appearance: none; 
} 

select.btn:focus { 
    outline: none; 
} 

.select-container { 
    position: relative; 
} 

는 여기를 참조하십시오 :

<div class="btn btn-small select-container"> 
    <select> 
     <option>title</option> 
     <option>date</option> 
     <option>author</option> 
    </select> 
</div> 

는 CSS

http://jsfiddle.net/YyvRf/3/