CSS Select Box

HTML

<label>
          <select>
                       <option selected> Select Box </option>
                       <option>Short Option</option>
                       <option>This Is A Longer Option</option>
           </select>
 </label>

CSS

/* The CSS */
 select {
 -moz-box-sizing:border-box;
 -webkit-box-sizing:border-box;
box-sizing:border-box;
 font:18px "arial";
 padding:14px 0px 13px 12px ;
 margin: 5px; -webkit-border-radius:3px;
 -moz-border-radius:3px;
 border-radius:3px;
 -webkit-box-shadow: 2px 2px 7px #000;
 -moz-box-shadow:2px 2px 7px #000;
 box-shadow: 2px 2px 7px #000;
 background: #f8f8f8;
 color:#888;
 border:none; outline:none;
 display: inline-block;
 -webkit-appearance:none;
 -moz-appearance:none;
 appearance:none; cursor:pointer;
 }
 /* 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:20px
 -moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
 } }
 label {
position:relative
}
 label:after
 {
 content:'►'; color:#aaa;
 background-color:#fff;
 border-radius:0 3px 3px 0px;
 right:6px; top:0px;
 padding:14px 8px 15px 9px;
 margin:-16px 0px 0px 0px;
 border-left: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;
 }

D E M O


Select Box Short Option This Is A Longer Option