inputやselect、textareaなどのフォームの
:hoverや:focus時の枠線をCSSで綺麗に整える方法

2023.10.11
2020.11.20

サイト制作をしていくにあたって、フォーム関連の作成は今では必須とまでは言わなくとも、かなりの確率でセットになることが増えているかと思います。

そんなお問い合わせや資料請求など何かしらのフォームを作る際に、input、select・option、textareaと色々なタグを使って構築していきますが、このフォーム関連のタグには、デフォルト状態だとクリックした時に枠線などの設定がされています。

これを設定しようとすると意外と重なる形で枠線が出てしまうことや、意外とマウスオーバーをしたとき、入力しようとそこにカーソルを当ててフォーカスした時など、様々な設定できる項目が用意されています。

今回はそんなフォームの枠線の調整について見ていきたいと思います。

この記事の目次

inputやtextareaなど枠線についてのおさらい

枠線の設定をどうするかというコードの前に、まず前提としておさえておきたい点を解説しておきます。

通常時、hover時、focus時の設定を（activeは不要）

そもそも、input、textareaなどのフォームの枠線を設定しようと思った時、設定をしなければいけない項目は下記の3つです。

通常時
ホバー時（:hover）
フォーカス時（:focus）

この3つをしっかり設定してあげることで、フォーム関連の枠線は解決できます。

:activeは？と思う方もいるかもしれませんが、これは実際に設定したらわかりますが、フォームの枠線における:activeは、設定してもクリックし続けないと動かないという事になるため、あまり意味がありません。

実際、下記に:activeだけを設定したサンプルを用意してみましたが、入力欄をクリックすると一瞬だけ黄色くなり、入力欄のところでクリックし続ける場合にのみずっと黄色の背景色が付くということになります。

実際のサンプル

このように、:activeは入力しようとクリックしただけでは、一瞬しかそれが反映されず、クリックし続けないといけないため、逆に設定が一瞬だけ反映されて消えるので、ユーザーの使い勝手からすると設定しない方が良いという結果になってしまいます。

枠線の設定はborderとoutlineが必要

フォームの通常時、ホバー時、フォーカス時には色々な設定を行えますが、その中でも枠線に関して設定をする場合は、実は2種類の設定が必要になります。

その2種類というのが、

border
outline

になります。
borderはCSSの設定で馴染みが深いためそこら中で設定を書いたりしていますが、実はあまりoutlineの設定を書くというケースやシーンは多くないため、borderを設定したけど、なんかフォームの枠線がうまくいかない…という事が起こります。

どちらかだけの設定では、ホバー時やフォーカス時などにうまくいかない事になるため、枠線の設定には、borderとoutlineの両方の設定が必要というのを覚えておきましょう。

フォームの入力欄の枠線を設定する実際のコード

では実際のコードも見ていきましょう。

基本は慣れてるborderの設定でOK

input{
  border: 2px #999 solid;
}

input:hover{
  border: 2px #0000ff solid;
}

input:focus{
  border: 2px #ff0000 solid;
}

ただ、このborderだけだと、先ほども書いたようにクリックしてフォーカスした時にoutlineの枠線も表示されてしまうため、おかしくなります。

outline: 0; の指定で枠線が重なるを避ける

outlineというのはフォーカスされた時に出てくる枠線になります。
そのため、outline: 0;を指定することで、フォーカス時に表示されるボーダーを無しに設定ができます。

これによって、borderで書いた設定のみが反映されることになります。

input{
  border: 2px #999 solid;
  outline: 0;
}

input:hover{
  border: 2px #0000ff solid;
}

input:focus{
  border: 2px #ff0000 solid;
}

実際のサンプルでも、outline: 0;の設定を加えた分では、フォーカス時に余計な枠線が出てこなくなり、思い描いた枠線のカラーの設定が反映されるようになります。

厳密に言えば、border、outlineのどちらかを0にしてどちらかを設定をすれば全く同じ動きにはなります。実際にそれぞれを入れ替えた下記のようなコードでも同じになります。

input{
  outline: 2px #999 solid;
  border: 0;
}

input:hover{
  outline: 2px #0000ff solid;
}

input:focus{
  outline: 2px #ff0000 solid;
}

どちらでも同じ動きをするのですが、個人的にはborderの方が様々なところで使うので見慣れている事もあり、borderで設定するようにしています。

枠線だけでなく様々な設定を合わせて調整する

フォームの枠線について見て来ましたが、実際にフォームの入力欄を整える場合、枠線だけを整えるという事はせず、様々な要素を設定して見やすいフォームを作っていくことが必要です。

余白
文字サイズ
文字カラー
枠線
背景

このあたりは少なくともしっかり設定をして見やすく調整していく必要があります。
当サイトのお問い合わせフォームなどでは、そのあたりを設定して調整しています。

見やすい設定のサンプル

最後に、簡単な見やすいフォームになるサンプルを設定してみました。
これが絶対というわけではないので、サイトの特性や顧客層にあわせて変えていく事は必要ですが、参考にしてみてください。

input,
textarea{
  width: 100%;
  padding: 5px 10px;
  border: 2px #ccc solid;
  border-radius: 5px;
  outline: 0;
}

input:hover,
textarea:hover{
  border: 2px #666 solid;
  background-color: #ffffdd;
}

input:focus,
textarea:focus{
  border: 2px #009900 solid;
  background-color: #ffff99;
}

通常時は、そのまま枠線だけの表示にし、ホバー時には枠線と背景に少し色を付けて目立たせ、フォーカス時（入力時）には、placeholderを非表示にして枠線を今ここを入力してますよ。というのをグリーンカラーで表示するといった設定になります。

実際に裏方ワークスでのお問い合わせフォームもこれと似た設定になっていますが、何も設定していないデフォルトのフォームと比べる遥かに見やすくなります。

select、optionの場合はhoverなどの挙動が少し通常のテキスト入力とは異なるところもありますが、基本は同じなので色々試して設定していけば問題なくいけるかとおもいます。