JSFiddle - React, Tailwind, and code Playground

by JonNorman

HTML

<form action="" method="POST">
        <div id="selectWrap">
            <!-- The onchange part makes the blue color go away automatically 
                 after an option got selected -->
            <select id="focusSelect" name="test_select" onchange="this.blur();">
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </select>
        </div>
    </form>

CSS

form select {
            background-color: #fff;
        }

        form select option {
            background: transparent;
        }

        /* Set the desired color for the focus state */
        select:focus, select.focus {
            background-color: green;
            outline: none;
        }

JavaScript

var selectBox = document.getElementById('focusSelect');

// This will add the .focus class to the select 
// giving it the defined background color
selectBox.onfocusin = function() {
    //this.className = 'focus';
};

// and this will restore the original background 
// color by removing the .focus class
selectBox.onfocusout = function() {
    this.className = '';
};

// This removes the blue highlight after an option is selected
selectBox.onchange = function() {
    this.blur();
};

document.getElementById("focusSelect").focus();