선택 상자 양식의 스타일 지정 방법. 제한이 있습니까?

Question

HTML/CSS에서 스타일 선택 상자 양식을 사용하고 있습니다.

내 현재의 결과가 여기에 있습니다 : : 그것은 가능 http://jsfiddle.net/LPN4J/1/

가이 같은 뭔가가 필요?

여기 내 코드입니다 :

HTML :

<label> 
    <select> 
     <option selected> Select your option </option> 
     <option>Option 1</option> 
     <option>Option 2</option> 
    </select> 
</label>​ 

CSS :

body, html {background:#444; text-align:center; padding:50px 0;} 

select { 
    padding:3px; 
    margin: 0; 
    -webkit-border-radius:4px; 
    -moz-border-radius:4px; 
    border-radius:4px; 
    -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset; 
    -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset; 
    box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset; 
    background: #f8f8f8; 
    color:#888; 
    border:none; 
    outline:none; 
    display: inline-block; 
    -webkit-appearance:none; 
    -moz-appearance:none; 
    appearance:none; 
    cursor:pointer; 
} 

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    select {padding-right:18px} 
} 

label {position:relative} 
label:after { 
    content:'<>'; 
    font:11px "Consolas", monospace; 
    color:#aaa; 
    -webkit-transform:rotate(90deg); 
    -moz-transform:rotate(90deg); 
    -ms-transform:rotate(90deg); 
    transform:rotate(90deg); 
    right:8px; top:2px; 
    padding:0 0 2px; 
    border-bottom:1px solid #ddd; 
    position:absolute; 
    pointer-events:none; 
} 
label:before { 
    content:''; 
    right:6px; top:0px; 
    width:20px; height:20px; 
    background:#f8f8f8; 
    position:absolute; 
    pointer-events:none; 
    display:block; 
} 

하시기 바랍니다 어떤 힌트. 나는 처음부터 CSS를 배운다.

Answer 1

글쎄, 부트 스트랩에 대한 질문 this plugin에 따라하는 것은 당신을 도움이 될 수 있습니다.

사용법 :

1. 다운로드 this (.ZIP) 또는 this (.tar.gz의는) 다음 플러그인

2. 를 다운로드 각각 당신의 관련 폴더에 파일을 넣어.

3. 선택 상자에 selectpicker 클래스를 추가하십시오. 그들의 스타일에 대한 운영 체제에 의존하는 이러한 요소를 완전히 제어 할 수 없습니다 :

Answer 2

어쩌면 이렇게 될까요?

HTML :

이

<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; 
    line-height: 1; 
    border: 0; 
    border-radius: 0; 
    height: 34px; 
    -webkit-appearance: none; 
    } 

.styled-select { 
    width: 240px; 
    height: 34px; 
    overflow: hidden; 
    background: url(http://cdn.bavotasan.com/wp-content/uploads/2011/05/down_arrow_select.jpg) no-repeat right #ddd; 
    border: 1px solid #ccc; 
    } 

JSFIDDLE