JSFiddle - React, Tailwind, and code Playground

by Bryan McIntosh

HTML

<input type="text" value="" id="trace" />
<div id="image-dropdown">
    <input checked="checked" type="radio" id="line1" name="line-style" value="1" />
    <label for="line1"></label>
    <input type="radio" id="line2" name="line-style" value="2" />
    <label for="line2"></label>
    <input type="radio" id="line3" name="line-style" value="3" />
    <label for="line3"></label>
</div>

CSS

/*http://stackoverflow.com/questions/9508029/dropdown-select-with-images*/
 #image-dropdown {
    /*style the "box" in its minimzed state*/
    border:1px solid #33CC33;
    width:104px;
    height:104px;
    overflow:hidden;
    background-color: #CCC;
    /*animate collapsing the dropdown from open to closed state (v. fast)*/
    -moz-transition: height 0.1s;
    -webkit-transition: height 0.1s;
    -ms-transition: height 0.1s;
    -o-transition: height 0.1s;
    transition: height 0.1s;
}
#image-dropdown:hover {
    /*when expanded, the dropdown will get native means of scrolling*/
    height:300px;
    width:110px;
    overflow-y:scroll;
    -moz-transition: height 0.5s;
    -webkit-transition: height 0.5s;
    -ms-transition: height 0.5s;
    -o-transition: height 0.5s;
    transition: height 0.5s;
}
#image-dropdown input {
    /*hide the nasty default radio buttons. like, completely!*/
    position:absolute;
    top:0;
    left:0;
    opacity:0;
}
#image-dropdown label {
    display:none;
    margin:2px;
    height:100px;
    width:100px;
    opacity:0.2;
    /*background:url("https://placeimg.com/100/100/tech");*/
}
#image-dropdown label[for=line1] {
    background-image:url("https://placeimg.com/100/100/nature");
}
#image-dropdown label[for=line2] {
    background-image:url("https://placeimg.com/100/100/tech");
}
#image-dropdown label[for=line3] {
    background-image:url("https://placeimg.com/100/100/people");
}
#image-dropdown:hover label {
    /*this is how labels render in the "expanded" state. we want to see only the selected radio button in the collapsed menu, and all of them when expanded*/
    display:block;
}
#image-dropdown label:hover {
    opacity:0.5;
}
#image-dropdown input:checked + label {
    /*tricky! labels immediately following a checked radio button (with our markup they are semantically related) should be fully opaque regardless of hover, and they should always be visible (i.e. even in the collapsed menu*/
    opacity:1 !important;
 ...