輪郭線を変更する方法 (outline) [CSS]

輪郭線

参考：

outline | MDN

使い方

outline: 1px solid red;

参考：

outline – アウトラインのスタイル／太さ／色を指定する | ウェブランサー

outline という記憶の外に置かれがちな CSS プロパティのメモ – Qiita

outline の特徴まとめ／border との違いまで | kakureblog

outline | WWW クリエイターズ

outline | HTML クイックリファレンス

フォーカス時のアウトラインを指定する | TAG index

outline | コーディングのプロが作る CSS 辞典

Outline Properties | W3Schools

Changing the outline color of a textarea – Stack Overflow

ハイライトを消す

入力欄にフォーカスした時の青い枠を消す。

input[type="text"]:focus {
    outline: none;
}Code language: CSS (css)

参考：

テキスト入力欄のフォーカス時に Chrome などが自動付加する枠線を消す方法 | スタイルシート Tips ふぁくとりー

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

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

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

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

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

色を変更する

• outline-color

参考：

outline-color – アウトラインの色を指定する | ウェブランサー

outline-color | HTML クイックリファレンス

outline-color | コーディングのプロが作る CSS 辞典

outline-color | MDN

outline-color Property | W3Schools

輪郭線をオフセットさせる

• outline-offset

参考：

outline-offset | MDN

ハイライトを光らせる

参考：

Glowing Blue Input Highlights | CSS-Tricks

-webkit-focus-ring-color

参考：

フォーカスの黒枠の色を変更するには | PersonWriter’s Room

Copy the Browser’s Native Focus Styles | CSS-Tricks

What is -webkit-focus-ring-color? – Stack Overflow

-webkit-appearance

-webkit-appearance: none;

参考：

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

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

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

border-radius

参考：

outline プロパティで作った枠線は角丸にすることができない | dskd

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

参考：

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

focus-ring

参考：

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