2013-04-22 4 views
1
나는 내가 크롬 에서 일하고 있지만 오페라와 파이어 폭스 HTML 코드를 작동하지 않는이 코드를 사용하는 rtied cmbobox 설계 변경하려면

:변경 콤보 상자 스타일

<div class="styled-select"> 
    <select> 
     <option>Here is the first option</option> 
     <option>The second option</option> 
    </select> 
</div> 

CSS 코드 :

.styled-select select { 
     background: transparent; 
     width: 268px; 
     padding: 5px; 
     font-size: 16px; 

     border: 0; 
     border-radius: 0; 
     height: 34px; 
     -webkit-appearance: none; 
     -moz-appearance:none; 
     appearance: none; 
     } 

.styled-select { 
     width: 271px; 
     height: 43px; 
     overflow: hidden; 
     background: url(img/cmbbox.png) no-repeat; 
     border: 0; 
     } 

jsFiddle : 선택 요소의 http://jsfiddle.net/Sz2e6/

+1

* 정확하게 * 작동하지 않습니까? 기본 화살표 만 제거하려고합니까? – Adrift

+0

모든 브라우저에는 JS/JQuery로 조작 할 수있는 기본 스타일이 있습니다. [UniformJS] (http://uniformjs.com/)를 사용하십시오. – Vucko

답변

1

전체 CSS 스타일은 크롬 브라우저에서만 지원됩니다. 자세한 내용은 question에 대한 두 번째 대답을 참조하십시오.

그 대답이 게시 되었기 때문에 Firefox는 스타일 선택에 대한 일부 지원을 얻었지만 모든 스타일 옵션을 사용할 수있는 것은 아닙니다.

브라우저 간 솔루션의 경우 일반적으로 선택을 숨기고 다른 요소의 스타일을 으로 지정 컨트롤처럼 보이게하는 것이 일반적입니다.