title: Select Menu Style Not Showing
body: <p>I have two select menus, and neither fully recognize the css styles I have applied. What I am doing wrong? The menus should be displaying different background color and font color when and option is selected.</p>
  
  <p><a href="http://jsfiddle.net/jasonniebauer/6rLyW/" rel="nofollow">http://jsfiddle.net/jasonniebauer/6rLyW/</a></p>
  
  <pre><code>&lt;select id="select1" onchange='OwnerType(this.value)'&gt;
                  &lt;option value="--Choose Type--"&gt;--Choose Type--&lt;/option&gt;
                  &lt;option value="Sole_Proprietor"&gt;Sole Proprietor&lt;/option&gt;
                  &lt;option value="Partnership"&gt;Partnership&lt;/option&gt;
                  &lt;option value="LLC"&gt;LLC&lt;/option&gt;
                  &lt;option value="Private_Corporation"&gt;Private Corporation&lt;/option&gt;
                  &lt;option value="Non_Profit_Tax_Exempt"&gt;Non-Profit/Tax Exempt&lt;/option&gt;
                  &lt;option value="Cooperative"&gt;Cooperative&lt;/option&gt;
                  &lt;option value="Limited_Partnership"&gt;Limited Partnership&lt;/option&gt;
                  &lt;option value="Other"&gt;Other&lt;/option&gt;
              &lt;/select&gt;
  
  &lt;select id="select2" onchange='ReturnPolicy(this.value)'&gt;
                  &lt;option value="--Choose Return Policy--"&gt;--Choose Return Policy--&lt;/option&gt;
                  &lt;option value="No_Returns"&gt;No Returns&lt;/option&gt;
                  &lt;option value="Exchange"&gt;Exchange&lt;/option&gt;
                  &lt;option value="30_Day_Refund"&gt;Refund within 30 Days&lt;/option&gt;
                  &lt;option value="Other2"&gt;Other&lt;/option&gt;
              &lt;/select&gt;
  
  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;
          }
  </code></pre>