CSS stylable select

A select tag that's fully customizable by pure CSS

by Denes Kellner

HTML

<div class="stylish">
    <label> Choose your superhero: </label>
    <span>
        <input   onclick  = "this.closest('div').classList.toggle('dropped-down');"><br>
        <select  onclick  = "this.closest('div').classList.remove('dropped-down');"
                 onchange = "this.closest('div').querySelector('input').value=this.value;"
        size=9>
            <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 Romanoff   </option>
            
        </select>
    </span>
</div>

CSS

/*  ALL YOU NEED is these 3 lines  */
.stylish > span {position:relative;}
.stylish select {position:absolute;left:0px;transform:scaleY(0);transform-origin:top center;}
.stylish.dropped-down select {transform:scaleY(1);}




/*  But if you want to make it sexier...  */
* {box-sizing:border-box;}
.stylish input, .stylish select {min-width:260px; margin:0 0 0 10px; border:1px solid silver;}
.stylish, .stylish select, .stylish select optgroup {font:15px calibri, sans-serif;}
.stylish input             {border-radius:4px; padding:12px;}
.stylish select            {border-top-color:transparent;transition:transform 200ms ease;}
.stylish select option     {border-bottom:1px solid #ddd; padding:12px 0px 10px 24px;}
.stylish select optgroup   {padding:8px 20px 3px 0; text-align:right;}  
.stylish select optgroup   {background:#3c7700; color:white; font-size:12px; font-variant:small-caps;}


/*  And this one is just for the show  */
body {padding:40px 60px;}

JavaScript

// none!