메뉴 스타일 선택 표시 안 함

Question

두 개의 선택 메뉴가 있으며 적용한 CSS 스타일을 완전히 인식하지 못합니다. 내가 뭘 잘못하고 있니? 및 옵션을 선택하면 메뉴에서 다른 배경색과 글꼴 색을 표시해야합니다.

http://jsfiddle.net/jasonniebauer/6rLyW/

<select id="select1" onchange='OwnerType(this.value)'> 
       <option value="--Choose Type--">--Choose Type--</option> 
       <option value="Sole_Proprietor">Sole Proprietor</option> 
       <option value="Partnership">Partnership</option> 
       <option value="LLC">LLC</option> 
       <option value="Private_Corporation">Private Corporation</option> 
       <option value="Non_Profit_Tax_Exempt">Non-Profit/Tax Exempt</option> 
       <option value="Cooperative">Cooperative</option> 
       <option value="Limited_Partnership">Limited Partnership</option> 
       <option value="Other">Other</option> 
      </select> 

<select id="select2" onchange='ReturnPolicy(this.value)'> 
       <option value="--Choose Return Policy--">--Choose Return Policy--</option> 
       <option value="No_Returns">No Returns</option> 
       <option value="Exchange">Exchange</option> 
       <option value="30_Day_Refund">Refund within 30 Days</option> 
       <option value="Other2">Other</option> 
      </select> 

select { 
      padding: 1rem; 
      margin: 0; 
      -webkit-border-radius: 3px; 
      -moz-border-radius: 3px; 
      border-radius: 3px; 
      border-bottom: 3px #898989; 
      /*-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.3); 
      -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.3); 
      box-shadow: 1px 1px 2px rgba(0,0,0,0.3);*/ 
      background: #F2F2F2; 
      color: #BDC3C7; 
      outline: none; 
      border: none; 
      display: inline-block; 
      -webkit-appearance: none; 
      -moz-appearance: none; 
      appearance: none; 
      cursor:pointer; 
      width: 100%; 
      font-size: 1.125em; 
      margin: 0 auto; 
     } 

select:hover { 
      color: #898989; 
      background: #E8E8E8; 
      -webkit-transition: border .25s linear, color .25s linear, background-color .25s linear; 
      -webkit-transition-property: border, color, background-color; 
      -webkit-transition-duration: 0.25s, 0.25s, 0.25s; 
      -webkit-transition-timing-function: linear, linear, linear; 
      -webkit-transition-delay: initial, initial, initial; 
      transition: border .25s linear, color .25s linear, background-color .25s linear; 
      transition-property: border, color, background-color; 
      transition-duration: 0.25s, 0.25s, 0.25s; 
      transition-timing-function: linear, linear, linear; 
      transition-delay: initial, initial, initial; 
     } 

select:active { 
      color: #898989; 
      background: #E8E8E8; 
     } 

     #select1.Sole_Proprietor, option[value="Sole_Proprietor"], 
     #select1.Partnership, option[value="Partnership"], 
     #select1.LLC, option[value="LLC"], 
     #select1.Private_Corporation, option[value="Private_Corporation"], 
     #select1.Non_Profit_Tax_Exempt, option[value="Non_Profit_Tax_Exempt"], 
     #select1.Cooperative, option[value="Cooperative"], 
     #select1.Limited_Partnership, option[value="Limited_Partnership"], 
     #select1.Other, option[value="Other"] { 
      background: #3498DB; 
      color: #FFFFFF; 
     } 

#select1.Sole_Proprietor:hover, option[value="Sole_Proprietor"]:hover, 
     #select1.Partnership:hover, option[value="Partnership"]:hover, 
     #select1.LLC:hover, option[value="LLC"]:hover, 
     #select1.Private_Corporation:hover, option[value="Private_Corporation"]:hover, 
     #select1.Non_Profit_Tax_Exempt:hover, option[value="Non_Profit_Tax_Exempt"]:hover, 
     #select1.Cooperative:hover, option[value="Cooperative"]:hover, 
     #select1.Limited_Partnership:hover, option[value="Limited_Partnership"]:hover, 
     #select1.Other:hover, option[value="Other"]:hover { 
      background-color: #258CD1; 
      -webkit-transition: border .25s linear, color .25s linear, background-color .25s linear; 
      -webkit-transition-property: border, color, background-color; 
      -webkit-transition-duration: 0.25s, 0.25s, 0.25s; 
      -webkit-transition-timing-function: linear, linear, linear; 
      -webkit-transition-delay: initial, initial, initial; 
      transition: border .25s linear, color .25s linear, background-color .25s linear; 
      transition-property: border, color, background-color; 
      transition-duration: 0.25s, 0.25s, 0.25s; 
      transition-timing-function: linear, linear, linear; 
      transition-delay: initial, initial, initial; 
     } 

#select2.No_Returns option[value="No_Returns"], 
     #select2.Exchange option[value="Exchange"], 
     #select2.30_Day_Refund option[value="30_Day_Refund"], 
     #select2.Other2 option[value="Other2"] { 
      background: #3498DB; 
      color: #FFFFFF; 
     } 

Answer 1

이 CSS에서 알려진 문제입니다. Sitepoint reference에서 :

셀렉트는 약간 다르게 사용중인 브라우저와 운영 체제에 따라 렌더링 및 디스플레이가 운영 체제에서 상속되기 때문에 오히려 잘, (CSS로 스타일 번잡 한 HTML 요소로 알려져있다 브라우저가 제공 한 것보다).

font-family와 같은 일부 스타일 요소는 여전히 사용할 수 있지만 대부분 사용자의 OS에 따라 무시됩니다.