検索フォームのユーザーエージェントスタイルシートを消したい

検索フォームなどを置いた時に、ブラウザーのユーザーエージェントスタイルが適用されて、青い「✕」が表示されたり、「入力時に枠線が表示されたり」「キーワード候補（入力補完）」が表示されたりという細かいストレスを感じることがあります。

 それらを打ち消すためのCSSを（自分用のメモとして）書いておきます。

CSSに追記

input[type="search"]:focus {
outline: none;
box-shadow: none; 
border-color: inherit;
background-color: inherit;
}
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
}
input[type="search"]::-webkit-search-cancel-button {
  display: none;
}
input::-webkit-calendar-picker-indicator {
  display: none;
}

HTML

HTMLの検索フォームには「autocomplete=”off”」を追記することで、キーワード候補（入力補完）が表示されなくなります。

<input type="search" class="search-field" placeholder="" value="" name="s" autocomplete="off">