JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/cupertino/jquery-ui.css">
<br><br><br>

<div class="styled-select">
    <select >
        <option>Sushi</option>
        <option>Blue cheese with crackers</option>
        <option>Steak</option>
        <option>Other</option>
    </select>
   </div>
<br><br><br>
<input class="ui-widget ui-state-default ui-corner-all ui-textinput" />
<br /><br />
<input class="ui-widget-content ui-corner-all ui-textinput" />
<button>Enter</button>

CSS

-
/*
.styled-select {
   width: 150px;
   height: 30px;
   overflow: hidden;
   background: url('Images/Arrowhead-Down-01.png') no-repeat right #F6F1DB;
   border: 2px solid #7d6754;
   border-radius: 5px;
   }

   .styled-select select {
   background: transparent;
   width: 180px;-
   padding: 3px;
   font-size: 16px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 30px;
   -webkit-appearance: none;
   font-family:Andalus;
   color:#7d6754;
   }
*/
p {
    font-family: sans-serif;
}



    .styled-select select {
        display: inline-block;
        border: 1px solid #DDDDDD;
        padding: 1px 1px 1px 1px;
        margin: 0;
        font: inherit;
        outline:none; /* remove focus ring from Webkit */
        line-height: 1;
        background: #f8f8f8;
        
        -webkit-appearance:none; /* remove the strong OSX influence from Webkit */
        
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
    }

    /* for Webkit's CSS-only solution */
    @media screen and (-webkit-min-device-pixel-ratio:0) { 
        .styled-select select {
            padding-right:30px;    
        }
    }
    
    /* Since we removed the default focus styles, we have to add our own */
    .styled-select select:focus {
        -webkselectit-box-shadow: 0 0 3px 1px #909090;
        -moz-box-shadow: 0 0 3px 1px #909090;
        box-shadow: 0 0 3px 1px #909090;
    }
    select::-ms-expand {
    display: none; /* hide default arrow in IE10 */
    }
    /* Select arrow styling */
    .styled-select:after {
        content: "▼";
        position: relative;
        top: -5%;
                
        cursor: pointer;
        top: 0;
        right: 0;
        bottom: 0;
        font-size: 50%;
        line-height: 25px;
        padding: 5px 10px;
        background: #ccc;
        color: white;
    border: 1px solid #ccc;
    border-left-style:none;
        
        pointer-events:none;
        
       ...

JavaScript

$('button').button();