JSFiddle - React, Tailwind, and code Playground

by toreaurstad

HTML

<span>
<button style="width:32x;height:32px;background: url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-shuffle-512.png); background-size: 32px 32px;" />
<select>
    <option selected disabled hidden>Choose here</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
</select>
</span>

CSS

select{
 margin: 40px;
 width: 50%;   
}
option:selected{
  fontSize:30pt;
}

JavaScript

jQuery.fn.toggleOption = function( show ) {
    jQuery( this ).toggle( show );
    if( show ) {
        if( jQuery( this ).parent( 'span.toggleOption' ).length )
            jQuery( this ).unwrap( );
    } else {
        if( jQuery( this ).parent( 'span.toggleOption' ).length == 0 )
            jQuery( this ).wrap( '<span class="toggleOption" style="display: none;" />' );
    }
};