formのinputのテキストフィールドのクリアボタン

「type=search」にすると少ない手間でクリアボタンが設置される

「type="search"」とCSSの記述でクリア

IE、Chromeは対応してるけど、Firefoxは非対応（2018/01/12時点）。

<style>
   input[type="search"] {
      -webkit-appearance: searchfield;
   }
   input[type="search"]::-webkit-search-cancel-button {
      -webkit-appearance: searchfield-cancel-button;
   }
</style>
<input type="search" value="丸ごとシマウマ" />

関連項目

・inputタグのテキストフィールド内のクリア