More than 3 years have passed since last update.

ある条件に一致した時だけCSSで枠線を表示するにはoutlineを使うのがよさそう

Last updated at 2020-07-02Posted at 2020-07-02

ボタンにフォーカスしたときだけ枠線を表示したい状況があり、
意気揚々と以下のような CSS を書いたところ、
フォーカスしたときに枠線は表示されるものの、
同時にボタンの表示位置がずれるという残念な結果になった。

# target-button:focus {
  border: solid 5px red;
}

どうやら border は枠線を表示するスペースを必要とするため、
常に枠線を表示するような場合には良いが、
フォーカスやホバーしたときにだけ枠線を表示する場合には向かない模様。

似たようなプロパティで outline はスペースを取らずに枠線を表示できるため、
こちらを使用したら上手くできた。
フォーカスやホバーなど、特定の条件に一致した時だけ枠線を表示するなら outline を使うのがよさそう。

ただし、 outline では上だけ表示や下だけ表示といったことができないようなので、
そういったことがやりたい場合はまた他の方法を探す必要がありそう。。。

以下、ホバーしたときだけ枠線を表示するサンプル。
BUTTON1 が border 、BUTTON2 は outline で枠線を表示しています。