JSFiddle - React, Tailwind, and code Playground

by sstur

HTML

<select class="b">
    <option>Hello World</option>
</select>

CSS

select {
    width: 80px;
    margin: 0;
}
select.a {
    border-radius: 0;
}
select.b {
    padding: 0 22px 0 7px;
    border-radius: 4px;
    height: 18px;
    line-height: 16px;
    -webkit-appearance: none;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDEwIDEwIj4KPGc+CjwvZz4KCTxwYXRoIGQ9Ik01IDBsLTIuMyAzLjY1aDQuNmwtMi4zLTMuNjV6TTUgMTBsMi4zLTMuNjUtNC42LTAgMi4zIDMuNjV6IiBmaWxsPSIjNDg0ODQ4Ij48L3BhdGg+Cjwvc3ZnPgo=) right 3px center no-repeat;
}

JavaScript

var toggleClass = function(event) {
  var name = event.data;
  document.getElementsByTagName('select')[0].classList.toggle(name);
}
window.addEventListener('message', toggleClass, false);
//window.document.querySelector('iframe[name=result]').contentWindow.postMessage('a', '*')