JSFiddle - React, Tailwind, and code Playground

by thebabydino

HTML

<select id='myselect'>
    <option>item 1</option>
    <option>item 2</option>
    <option>item 3</option>
</select>
<div class='arrow'></div>

CSS

select, .arrow { display: inline-block; vertical-align: middle; }
option { padding: 0 1em; }
.arrow {
    width: 26px;
    height: 26px;
    margin-left: -28px;
    display: inline-block;
    background: url(http://img51.imageshack.us/img51/2650/11954239071227223603kub.png);
    background-size: 100% 100%;
}

JavaScript

$('.arrow').click(function(){
    //$('#myselect').css({'background': 'grey'});
    $('#myselect option').focus();
})