You need to style the select tag with pure CSS. I tried to do this, but when I click on the down arrow, the list does not open, and I need to click the field itself.

* {font-family: Arial} #search { height: 270px; width: 310px; /*background: #fff65f;*/ overflow: hidden; } #search-form { background: #8bab40; color: #ffffff; padding-left: 40px; padding-top: 14px; } #search-form input[type="text"], select { width: 230px; background: #afc968; margin-top: 5px; margin-bottom: 5px; font-family: Arial; color: #557013; } #search-form input[type="text"]{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .select span{ position: relative; top: 2px; right: -3px; } .select-button { float: right; width: 18px; height: 18px; position: relative; /*z-index: -9999;*/ top: 7px; right: 42px; background: #77993a linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); border: #70902b 1px solid; } .caret { display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: 4px solid; border-right: 4px solid transparent; border-left: 4px solid transparent; } #search-form select { -webkit-appearance: none; -moz-appearance: none; appearance: none; } 
 <div id="search"> <div id="search-form"> <form> <label>Keyword(s)</label><br> <input type="text"> <label>Category</label><br> <div class="select"> <select> <option>--select--</option> </select> <div class="select-button"><span class="caret"></span></div> </div> </form> </div> </div>

What else do you need to finish?

    1 answer 1

    If you add the following:

     .select-button { ... pointer-events:none }

    The arrow will become, as it were, transparent to the click, and when you click on it, the field will be pressed.

    At the same time, it will be possible to stylize its reaction to the mouse (hover, active, etc.) using select:hover + .select-button selectors select:hover + .select-button

     * {font-family: Arial} #search { height: 270px; width: 310px; /*background: #fff65f;*/ overflow: hidden; } #search-form { background: #8bab40; color: #ffffff; padding-left: 40px; padding-top: 14px; } #search-form input[type="text"], select { width: 230px; background: #afc968; margin-top: 5px; margin-bottom: 5px; font-family: Arial; color: #557013; } #search-form input[type="text"]{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .select span{ position: relative; top: 2px; right: -3px; } .select-button { float: right; width: 18px; height: 18px; position: relative; /*z-index: -9999;*/ top: 7px; right: 42px; background: #77993a linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); border: #70902b 1px solid; pointer-events:none } .caret { display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: 4px solid; border-right: 4px solid transparent; border-left: 4px solid transparent; } #search-form select { -webkit-appearance: none; -moz-appearance: none; appearance: none; } 
     <div id="search"> <div id="search-form"> <form> <label>Keyword(s)</label><br> <input type="text"> <label>Category</label><br> <div class="select"> <select> <option>--select--</option> </select> <div class="select-button"><span class="caret"></span></div> </div> </form> </div> </div>