JSFiddle - React, Tailwind, and code Playground

by mindplay

HTML

<div class="select">
    <div class="trigger">Please select &raquo;</div>
    <div class="options">
        <label>
            <input type="radio" name="foo" value="fudge" />
            HELLO, <strong>WORLD</strong>
        </label>
        
        <label>
            <input type="radio" name="foo" value="cake" />
            HALLO, <strong>WELT</strong>
        </label>
        
        <label>
            <input type="radio" name="foo" value="cake" />
            BONJOUR, <strong>MONDE</strong>
        </label>
    </div>
</div>

CSS

.select { position:relative; }
.select .trigger { border:solid 1px #888; background:#ddf; border-radius:8px; cursor:pointer; padding:8px; }
.select .options { display:none; z-index;10; top:0; left:0; width:inherit; }
.select label { padding:8px; border-radius: 8px; margin-bottom:8px; cursor:pointer; display:block; }
.select label:hover { background:yellow; }
.select label.is-active { background:red; }
.select label input[type="radio"] { visibility:hidden; width:0; height:0; }

JavaScript

var ACTIVE = 'is-active';

$('body').on('click', '.select .trigger', function () {
    $(this).next('.options').show();
});

$('body').on('click', '.select input[type="radio"]', function () {
    var name = $(this).attr('name');
    
    $('input[name="' + name + '"]')
        .each(function () { this.checked = false; })
        .closest('label')
        .removeClass(ACTIVE);
    
    $(this)
        .closest('label')
        .addClass(ACTIVE);
    
    this.checked = true;
    
    console.log($(':input').serialize());
});