title: Adding a Down Arrow to Select Drop Down
body: <p>Hello I'm creating an MVC Razor site and I currently have a styled drop down box, <a href="http://jsfiddle.net/S3h27/" rel="noreferrer">Here is the jsfiddle</a>. I can't figure out how to add a down arrow. Any ideas? I've tried <a href="http://bavotasan.com/2011/style-select-box-using-only-css/" rel="noreferrer">this</a> but it didn't work for me. Here is my current code</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="dropdown"&gt;
      &lt;select&gt;
          &lt;option&gt;Option One &lt;/option&gt;
          &lt;option&gt;Option Two &lt;/option&gt;
          &lt;option&gt;Option Three &lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.dropdown select{
    background:transparent;
     width: 297px;
     padding: 2px;
     font-family:Arial, Helvetica, sans-serif;
     font-size:1.2em;
     font-weight:600;
     color:#fff;
     line-height: 1;
     border: 0;
     border-radius: 0;
     /*Hides the default arrows for Selects*/
    -webkit-appearance: none;
    -moz-appearance: none;
      text-indent: 0.01px;
      text-overflow: '';
  
    }
  
  
  .dropdown{
      width: 297px;
      overflow: hidden;
      background: no-repeat right #363636;
      border-top:#575757 1px solid;
      -webkit-border-radius: 4px 4px 4px 4px;
       -moz-border-radius: 4px 4px 4px 4px;
            border-radius: 4px 4px 4px 4px;
      -webkit-box-shadow: inset 0 2px 4px rgba(107, 105, 105, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
       -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
            -moz-box-shadow:    0px 8px 3px -9px #000000;
            -webkit-box-shadow: 0px 8px 3px -9px #000000;
            box-shadow:         0px 8px 3px -9px #000000;  
  
  }
  
  select &gt; option {
    background: #D3D3D3;
    color: black;
  </code></pre>