フォームのハイライトを消す方法 (input/outline)

フォーカス時の青い枠を消す

input[type="text"]:focus {
  outline: none;
}

参考:

CSS で input フォーカス時の影や border を消す | KonifarPod

フォームのテキスト入力欄を選択したときに枠の色が変わるようにする方法 | delaymania

iOS だと Hiragino + outline で input の文字が正しく表示されない | iwb.jp

Google Chrome input 要素以外でも線 (アウトライン) が表示される問題 | 零弐壱蜂

outline – CSS: カスケーディングスタイルシート | MDN

How to remove the border highlight on an input text element – Stack Overflow

How to remove border (outline) around text/input boxes? (Chrome) – Stack Overflow

Glowing Highlights

参考:

Glowing Blue Input Highlights | CSS-Tricks

-webkit-appearance

-webkit-appearance: none;

参考:

iPhone で input 要素に CSS が効かない時の対処方法 – Qiita

iOS のフォームのボックスシャドウは box-shadow ではなかった件 | PressStocker

-webkit-appearance : none で初期化!スマホのフォーム要素のスタイル | Web Design 覚え書き

iOS Safari でボタンのスタイルをリセットする

参考:

iOS での submit, button のデザインをリセットする CSS – Qiita

focus-ring

参考:

outline: none をやめよう、focus-ring を使おう | yuhei blog

タグ:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です