CSS stylable select

A select tag that's fully customizable by pure CSS

HTML

<div class="stylish">
    <label> Choose your superhero: </label>
    <span>
    	<input onclick="$(this).closest('div').find('select').slideToggle(110)">
        <br>
    	<select size=15 onclick="$(this).hide().closest('div').find('input').val($(this).find('option:selected').text());">
    		<optgroup label="Fantasy"></optgroup>
    		<option value="gandalf">Gandalf</option>
    		<option value="harry">Harry Potter</option>
    		<option value="jon">Jon Snow</option>
    		<optgroup label="Comics"></optgroup>
    		<option value="tony">Tony Stark</option>
    		<option value="steve">Steven Rogers</option>
    		<option value="natasha">Natasha Romanova</option>
    	</select>
    </span>
</div>

CSS

/* required part */
.stylish span {position:relative;}
.stylish select {position:absolute;left:0px;display:none}

/* beauty */
.stylish input {
    width:250px;
    padding:5px;
}
.stylish select {
    min-width:260px;
    margin-top:1px;
    border-top:none;
}
.stylish select option {
    outline:3px double rgba(188,188,188,0);
    outline-offset: -4px;
    padding:12px 0px 10px 24px;
    transition: all 120ms ease;
    /*box-shadow:32px -25px 50px -40px black inset;*/
}
.stylish select option:hover {
    outline-color:rgba(188,188,188,1);
    transform: scale(0.94);
}
.stylish select optgroup {
    padding:12px 20px 7px 0px;
    text-align:right;
    font:18px candara,sans-serif;
    font-weight:bold;
    color:white;
    background:radial-gradient(ellipse at 50% -40px, white, #003853);
}