JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dropdown">
      <p>Show: </p>
    
        <select>
         <option>18 per page</option>
         <option>10 per page</option>
         <option>5 per page</option>

       </select>
</div> <!-- DropDown -->

CSS

.dropdown p {
	display: inline-block;
	font-weight: bold;
}

.dropdown select {

      border: 0 !important;  /*Removes border*/
      -webkit-appearance: none;  /*Removes default chrome and safari style*/
      -moz-appearance: none; /* Removes Default Firefox style*/
      background: url('https://qa06a.tenrox.net/TEnterprise/RadControls/ComboBox/Skins/Tenrox/DropArrow.gif') no-repeat;  /*Adds background-image*/
      background-position: 80px 0px;  /*Position of the background-image*/
      width: 100px; /*Width of select dropdown to give space for arrow image*/
      text-indent: 0.5px; /* Removes default arrow from firefox*/
      text-overflow: "";  /*Removes default arrow from firefox*/

      /*My custom style for fonts*/

      /*color: #1455a2;*/
}
select::-ms-expand {
    display: none;
}