Styling Select with CSS3 only

HTML

<div class="responsive_menu">
    <select id="resmenu4">
        <option value="/">Home</option>
        <option value="htest.htm" selected="selected">Link</option>
        <option value="" disabled="disabled">Submenu no url</option>
        <option value="" disabled="disabled">&nbsp;&nbsp;Submenu with #</option>
        <option value="test.htm">&nbsp;&nbsp;&nbsp;&nbsp;Link</option>
        <option value="test.htm">&nbsp;&nbsp;Link</option>
        <option value="test.htm">Submenu with url</option>
        <option value="test.htm">&nbsp;&nbsp;Link</option>
        <option value="" disabled="disabled">&nbsp;&nbsp;Submenu no href</option>
        <option value="test.htm">&nbsp;&nbsp;&nbsp;&nbsp;Link</option>
        <option value="test.htm">&nbsp;&nbsp;&nbsp;&nbsp;Link</option>
        <option value="" disabled="disabled">&nbsp;&nbsp;&nbsp;&nbsp;Link no url</option>
    </select>
</div>

<br>Original SVG Icon:<br><a href="http://f.cl.ly/items/1U2c3b1215383h3a2T2r/icon-menu.svg" target="_blank">icon-menu.svg</a>

CSS

body {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    padding: 2em;
}
.responsive_menu select {
    text-indent: 0.01px;
    text-overflow: "";
    display: block;
    width: 100%;
    height: 36px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857;
    vertical-align: middle;
    background: #efefef url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IlVudGl0bGVkLTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMThweCIgaGVpZ2h0PSIxMnB4IiB2aWV3Qm94PSIwIDAgMTggMTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE4IDEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9Im5vbmUiIGQ9InoiLz4NCjxnIGlkPSJMYXllcl94MjVfMjAxIj4NCgk8cmVjdCB3aWR0aD0iMTgiIGhlaWdodD0iMiIvPg0KCTxyZWN0IHk9IjUiIHdpZHRoPSIxOCIgaGVpZ2h0PSIyIi8+DQoJPHJlY3QgeT0iMTAiIHdpZHRoPSIxOCIgaGVpZ2h0PSIyIi8+DQo8L2c+DQo8cGF0aCBmaWxsPSJub25lIiBkPSJ6Ii8+DQo8L3N2Zz4NCg==') no-repeat 98% 50%;
    color:black;    
    border: 1px solid #ddd;
    outline:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
   
}
 select::-ms-expand {
            display: none;}