JSFiddle - React, Tailwind, and code Playground

HTML

<select id="field-action" name="" class=" " data-validation-required="true">    
      <option value="" selected="selected">—</option>        
      <option value="1" id="field-action-lock">Lock</option>    
      <option value="2" id="field-action-unlock">Unlock</option>    
      <option value="3" id="field-action-pin">Pin</option>    
      <option value="4" id="field-action-unpin">Unpin</option>    
      <option value="5" id="field-action-delete">Delete</option>    
      <option value="6" id="field-action-undelete">Undelete</option>    
      <option value="7" id="field-action-move">Move</option>    
      <option value="8" id="field-action-merge">Merge</option>    
      <option value="9" id="field-action-spam">Spam</option>    
      <option value="10" id="field-action-notspam">Not Spam</option>    
    </select>

CSS

select {
    background: yellow;
}
select:focus {
    background: red;
    -webkit-transform: translate(0, -100px);
}