【CSS】検索フォームのスタイリングのあれこれ

アクティブ状態の枠線、影を変更したいとき

疑似要素:focusで指定。

input:focus {
  border: 1px solid red;
  box-shadow: 3px 3px 5px red;
}

カーソルの縦棒の色（チカチカしてるやつ）を変更したいとき

input {
  caret-color: red;
}

プレースホルダーの色を変更したいとき

プレースホルダーとは、”名前を入力して下さい”みたいなやつ。フォームに元から入っている文言のこと。
入力された文字色は変えなくて良いけど、このプレースホルダーの文字色だけを薄くしたいといった場合は以下

input {
   color: 濃い色;
   &::placeholder  {
     color: 薄い色;
   }
}

caret-colorやplaceholder疑似要素を恥ずかしながら初めて知ったので綴りました。