今回は、以下の画像のように、input要素をクリックした時に現れる枠線の色を変える方法、または、消す方法を解説します。
inputの枠線の色を変える・消す方法
input要素の枠線の色を変える方法、または、消す方法は、CSSに『outline』を追加するだけです！
それでは、さっそく以下のデモをご覧ください。
See the Pen yLJMbNv by ryu (@ryu-no-sss) on CodePen.
枠線の色を変える方法 ➡️ 『outline: solid 2px red;』で指定する。 枠線を消す方法 ➡️ 『outline: none;』を指定する。 |
outlineの値の設定方法
outlineの値の設定は、以下の画像のように枠線を指定しています。
主な枠線の種類
| solid | 通常の線 |
| double | 2本線 |
| groove | 立体的に沈んだ線 |
| ridge | 立体的に隆起した線 |
| dashed | 破線 |
| dotted | 点線 |
| inset | 上と左の線が暗く、下と右の線が明るく表示され、立体的に沈んだような線 |
| outset | 上と左の線が明るく、下と右の線が暗く表示され、立体的に隆起したような線 |
| none | アウトラインを消す |
枠線の太さ・色の値
・枠線の太さ ➡️ pxまたは、『thin、medium、thick』などのキーワード ・枠線の色 ➡️ 『#fff』などのカラーコードまたは、『red』などのカラーキーワード |
使用例
See the Pen xxOqdMb by ryu (@ryu-no-sss) on CodePen.
まとめ
・枠線の色を変える方法 ➡️ 『outline: solid 2px red;』で指定する。 ・枠線を消す方法 ➡️ 『outline: none;』を指定する。 |
それでは、最後まで読んでいただきありがとうございました。
タグ
