JSFiddle - React, Tailwind, and code Playground

by sstur

HTML

<select>
  <option>Option One</option>
  <option>Option Two</option>
</select>

CSS

body {
  font-family: Arial, sans-serif;
  font-size: 12px;
}


/* target webkit only */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  select {
    -webkit-appearance: none;
    border: 1px solid #999;
    border-radius: 3px;
    height: 26px;
    /* line-height should be height minus padding and border */
    line-height: 20px;
    margin: 0;
    /* large right padding so text doesn't overlap the arrow */
    padding: 2px 24px 2px 5px;
    cursor: pointer;
    background: transparent right 3px center no-repeat;
    /* svg background image for hi-res on retina displays */
    /*   arrow icon from icomoon.io */
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij4KPGc+Cgk8bGluZSBzdHJva2Utd2lkdGg9IjEiIHgxPSIiIHkxPSIiIHgyPSIiIHkyPSIiIHN0cm9rZT0iIzQ0OUZEQiIgb3BhY2l0eT0iIj48L2xpbmU+CjwvZz4KCTxwYXRoIGQ9Ik0xMi4wNzYgNi44NDFjMC4yNDQtMC4yNDEgMC42MzgtMC4yNDEgMC44ODEgMHMwLjI0NCAwLjYzMSAwIDAuODcybC0zLjUxNiAzLjQ0N2MtMC4yNDQgMC4yNDEtMC42MzggMC4yNDEtMC44ODEgMGwtMy41MTctMy40NDdjLTAuMjQzLTAuMjQxLTAuMjQzLTAuNjMxIDAtMC44NzJzMC42MzctMC4yNDEgMC44ODEgMGwzLjA3NiAyLjgyNiAzLjA3Ni0yLjgyNnoiIGZpbGw9IiM3Nzc3NzciPjwvcGF0aD4KPC9zdmc+Cg==");
  }
}