드롭 다운 선택기 용 CSS

Question

나는 상상력의 스트레칭으로 웹 개발자가 아니며, 기본적으로 재판과 많은 오류를 통해 원하는 방식으로 물건을 얻습니다. 나는 이것을 알아낼 수 없다. 기본 OS 스타일링을 사용하여 찾은 적절한 스타일로 내 드롭 다운 선택기의 스타일을 변경하려고하지만 어디로 가는지 알 수 없습니다. 다음은 기존 드롭 다운 선택 CSS입니다 :

/* select 
    ==========================================================*/ 
.selector, .selector * { 
/* margin: 0; 
    padding: 0; */ 
} 
.selector select:focus { outline: 0; } 

div.selector { 
/* background-position: -490px -24px; 
    display: inline-block; 
    overflow: hidden; 
    padding-left: 2px; 
    position: relative; 
    vertical-align: middle; 

    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 

    -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2); 
    -moz-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2); 
    box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2); */ 
} 
    div.selector span { 
/* background-position: 100% 0; 
    color: #fff; 
    font-size: 11px; 
    font-weight: bold; 
    overflow: hidden; 
    padding: 0px 27px 0px 7px; 
    text-overflow: ellipsis; 
    text-shadow: 1px 1px 0 #000; 
    white-space: nowrap; */ 
    } 
    div.selector select { 
    /*background: #fff; 
    color: #000; 
    border: none; 
    left: 0; 
    opacity: 0; 
    position: absolute; 
    top: 0; 
    width: 100%; 
    text-transform:none;*/ 
    font-size:12px; 
    opacity: 1 !important; 
    } 

div.selector, div.selector span { 

    /*background-repeat: no-repeat; 
    line-height: 24px; 
    text-transform: uppercase; 
    background-image: url("sprite.png"); 
    background-repeat: no-repeat; 
    line-height: 24px;*/ 

} 
div.selector, div.selector span, div.selector select { /*height: 24px;*/  } 
/* #sort { 

    margin: 10px 0; 
    float:right; 
    width:257px; 
} 
#sort span {display:none;} 
#sort SELECT { 
    background: none repeat scroll 0 0 #fff; 
    color: #000; 
    vertical-align: bottom; 
    opacity:1 !important; 
    float:left; 

} */ 

button, textarea, input[type=text], input[type=password] { 
    border: 0; 
    margin: 0; 
    padding: 0; 
} 

textarea, input[type=text], input[type=password], select, .selector span { 
    color: #888; 
    font: 12px 'Helvetica Neue', Arial, sans-serif; 
} 

input[type=submit] { font: 12px 'Helvetica Neue', Arial, sans-serif; } 

textarea, input[type=text], input[type=password] { 
    border: 1px solid #a9a9a9; 
    padding: 4px 8px; 

} 

button { 
    background: transparent; 
    color: #1b1e00; 
    font-size: 28px; 
    text-transform: lowercase; 
} 

button, label, input[type=submit] { cursor: pointer; } 



.selector span { display: block; } 
.selector, .selector span, .selector select { cursor: pointer; } 

그리고 여기에 내가 모양을하고 싶은 무엇을위한 CSS입니다 : 아무것도 어디로

/* all form DIVs have position property set to relative so we can easily position newly created SPAN */ 
form div{position:relative;} 

/* setting the width and height of the SELECT element to match the replacing graphics */ 
select.select{ 
    position:relative; 
    z-index:10; 
    width:166px !important; 
    height:26px !important; 
    line-height:26px; 
} 

/* dynamically created SPAN, placed below the SELECT */ 
span.select{ 
    position:absolute; 
    bottom:0; 
    float:left; 
    left:0; 
    width:166px; 
    height:26px; 
    line-height:26px; 
    text-indent:10px; 
    background:url(images/bg_select.gif) no-repeat 0 0; 
    cursor:default; 
    z-index:1; 
    } 

은 기본적으로 나도 몰라. 어떤 도움이라도 대단히 감사 할 것입니다.

감사합니다.

Answer 1

현재 드롭 다운 메뉴의 스타일을 완벽하게 지원하는 유일한 브라우저는 크롬입니다. 이 게시물을 참조하십시오 :
How to style a <select> dropdown with CSS only without JavaScript?

크로스 브라우저와 일치시키기 위해 드롭 다운이 필요한 경우 몇 가지 옵션이 있습니다.
1) http://harvesthq.github.com/chosen/ 또는 기타 (내 평소 선택)
2) 처음부터 드롭 다운을 다시 디자인하십시오. 이것은 매우 복잡하고 오류를 생성하기 쉽기 때문에 권장하지 않습니다. http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx
또는
http://css-tricks.com/dropdown-default-styling/

희망이 도움이 되었으면합니다.