title: CSS with select box - width and label
body: <p>I have a select box that I need to style - we currently use a jquery plugin that replaces selects with divs and lists, and we want to get rid of it. </p>
  
  <p>I found a <a href="http://cssdeck.com/labs/styling-select-box-with-css3" rel="nofollow noreferrer">sample</a> that is pretty close to what we want, but when I try to apply it to our select, there are a few off things. I'm a PHP developer, and CSS is NOT my thing, so I just don't know where to start looking with this. I have spent several hours fiddling with different values with no success.</p>
  
  <p>This is the select box:</p>
  
  <pre><code>&lt;label class="dropdown_arrow"&gt;
      &lt;select id="address_dropdown"&gt;
          &lt;option value=""&gt;Select a saved location&lt;/option&gt;
          &lt;option value="0"&gt;THISISAREALYLONGNICKNAME..........................: 602 BLOWING ROCK RD APT. 2 BOONE, NC 28607&lt;/option&gt;
          &lt;option value="1"&gt;TEST HOUSE: 9884 BLUEBONNET BLVD BATON ROUGE, LA 70810&lt;/option&gt;
          &lt;option value="2"&gt;MOM &amp;amp; DAD: 9880 BLUEBONNET BLVD BATON ROUGE, LA 70810&lt;/option&gt;
          &lt;option value="3"&gt;414 N ORLEANS ST CHICAGO, IL 60610&lt;/option&gt;
          &lt;option value="4"&gt;NEW ADDRESS: 10 BARTON DR HOMEWOOD, IL 60430&lt;/option&gt;
          &lt;option value="5"&gt;1600 PENNSYLVANIA AVE WASHINGTON, DC 20500&lt;/option&gt;
          &lt;option value="6"&gt;Add a new address&lt;/option&gt;
      &lt;/select&gt;
  &lt;/label&gt;
  </code></pre>
  
  <p>This is the CSS:</p>
  
  <pre><code>select#address_dropdown {
      width: 515px;
      font-family: 'Interstate',sans-serif;
      font-size: 16px;
      font-weight: bold;
      padding:6px 10px;
      -webkit-border-radius:5px;
      -moz-border-radius:5px;
      border-radius:5px;
      background: #f8f8f8;
      color:#888;
      border:1px solid #ccc;
      outline:none;
      display: inline-block;
      -webkit-appearance:none;
      -moz-appearance:none;
      appearance:none;
      cursor:pointer;
      /* overflow-y: scroll; */
      overflow: hidden;
      text-overflow: ellipsis;
  }
  
  select#address_dropdown option {
      background: black;
      color: white;
      font-weight: normal;
      font-size: 12px;
      padding-top: 8px;
      overflow: hidden; 
      text-overflow: ellipsis;
  }
  
  /* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
  @media screen and (-webkit-min-device-pixel-ratio:0) {
      select {padding-right:18px}
  }
  
  
  label.dropdown_arrow {position:relative}
  label.dropdown_arrow:after {
      content:'&gt;';
      font:18px "Consolas", monospace;
      color:red;
      -webkit-transform:rotate(90deg);
      -moz-transform:rotate(90deg);
      -ms-transform:rotate(90deg);
      transform:rotate(90deg);
      right:15px; top:2px;
      padding:0 0 2px;
      border-bottom:1px solid #ddd;
      position:absolute;
      pointer-events:none;
  }
  label.dropdown_arrow:before {
      content:'';
      right:6px; top:0px;
      width:20px; height:20px;
      background:#f8f8f8;
      position:absolute;
      pointer-events:none;
      display:block;
  }
  </code></pre>
  
  <p>There are two problems that I'm having.</p>
  
  <p>1) The custom arrow, created with the <code>label:after</code> property isn't aligned correctly. On the original sample, it's situated so that it hides the default select box arrow. On mine, you can still see the default select arrow underneath the custom arrow.</p>
  
  <p>2) The options are not inheriting the width of the parent select. When you click on it, the contents extend beyond the right edge of the select box. I had thought that the <code>overflow</code> and <code>text-overflow</code> properties would address that, but they have not. </p>
  
  <p>Here's a <a href="http://jsfiddle.net/EmmyS/7L3C7/1/" rel="nofollow noreferrer">fiddle</a> of the current code. Can anyone help with these two issues? I'm sure they're very simple if you know your CSS, but it's a rare day that I have anything to do with it, and I just don't know where to start looking. </p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Apparently the code, which was touted as cross-browser, looks different in FF and Chrome, and is completely awful in IE9. </p>
  
  <p>Chrome:</p>
  
  <p><img src="https://i.stack.imgur.com/F8zog.png" alt="Chrome"></p>
  
  <p>Firefox:</p>
  
  <p><img src="https://i.stack.imgur.com/HHa9g.png" alt="Firefox"></p>
  
  <p>IE9:</p>
  
  <p><img src="https://i.stack.imgur.com/ehvwJ.png" alt="IE9"></p>