JSFiddle - React, Tailwind, and code Playground

HTML

<div class="select">
    <select>
        <option>test</option>
        <option>23</option>
        <option>34</option>
        <option>55</option>
    </select>
</div>

CSS

.select {
    position: relative;
    width: 200px;
    margin: 1px;

}

.select select {
    width: 100%;
    border: 0;
    font-size: 13px;
    height: 39px;
    -webkit-box-sizing: border-box;
    outline: 0;
}

.select:after {
     
    content: ' ';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    -webkit-box-sizing: border-box;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
-ms-border-radius: 1px;
-o-border-radius: 1px;
border-radius: 1px;
-webkit-box-shadow:  0 2px 3px rgba(0, 0, 0, 0.35);
-moz-box-shadow:  0 2px 3px rgba(0, 0, 0, 0.35);
box-shadow:  0 2px 3px rgba(0, 0, 0, 0.35);
background: transparent;
    
    height: 39px;

    
    pointer-events: none;
}

JavaScript

$('select').on('focus blur', function(e) {
    console.log('tt');
    if ( e.type == 'focus') ) {
   $(this).parent().css('border', '1px solid red');
    }else {
    $(this).parent().css('border', 0);
    }
});