MaterializeというCSSフレームワークを適用した検索フォームのサンプルです。

ヘッダーでJS/CSSを読み込む（wp_enqueue_scriptなどで）

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

セレクトボックス用に、あらかじめ以下を記述

検索の設定画面において、「前に挿入」に以下を挿入
<div class=”input-field”>

同「後に挿入」に以下を挿入
</div>

フッターのwp_footer関数より下部に以下を記述

<script>
jQuery(document).ready(function($){
$(‘.feas-select option:first-child’).attr(‘selected’,’selected’);
$(‘.feas-select option:first-child’).attr(‘disabled’,true);
$(‘select’).formSelect();
});
</script>