title: How to style select box form. Does it have any limitations?
body: <p>I'm trying style select box form in HTML/CSS. I need something like this:</p>
  
  <p><img src="https://i.stack.imgur.com/aMzb1.png" alt="enter image description here"></p>
  
  <p>My current result is here: <a href="http://jsfiddle.net/LPN4J/1/" rel="nofollow noreferrer">http://jsfiddle.net/LPN4J/1/</a></p>
  
  <p>Is it possible?</p>
  
  <p>Here is my code:</p>
  
  <p><strong>html:</strong></p>
  
  <pre><code>&lt;label&gt;
      &lt;select&gt;
          &lt;option selected&gt; Select your option &lt;/option&gt;
          &lt;option&gt;Option 1&lt;/option&gt;
          &lt;option&gt;Option 2&lt;/option&gt;
      &lt;/select&gt;
  &lt;/label&gt;​
  </code></pre>
  
  <p><strong>css:</strong></p>
  
  <pre><code>body, html {background:#444; text-align:center; padding:50px 0;}
  
  select {
      padding:3px;
      margin: 0;
      -webkit-border-radius:4px;
      -moz-border-radius:4px;
      border-radius:4px;
      -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
      -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
      box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
      background: #f8f8f8;
      color:#888;
      border:none;
      outline:none;
      display: inline-block;
      -webkit-appearance:none;
      -moz-appearance:none;
      appearance:none;
      cursor:pointer;
  }
  
  @media screen and (-webkit-min-device-pixel-ratio:0) {
      select {padding-right:18px}
  }
  
  label {position:relative}
  label:after {
      content:'&lt;&gt;';
      font:11px "Consolas", monospace;
      color:#aaa;
      -webkit-transform:rotate(90deg);
      -moz-transform:rotate(90deg);
      -ms-transform:rotate(90deg);
      transform:rotate(90deg);
      right:8px; top:2px;
      padding:0 0 2px;
      border-bottom:1px solid #ddd;
      position:absolute;
      pointer-events:none;
  }
  label:before {
      content:'';
      right:6px; top:0px;
      width:20px; height:20px;
      background:#f8f8f8;
      position:absolute;
      pointer-events:none;
      display:block;
  }
  </code></pre>
  
  <p>Please any hint. I learn css from scratch.</p>