はじめに
slick.jsでスライダーを実装している時、スライドの矢印(<button>要素)をクリックしたら矢印の周りの線が青色になってしまったのでならないようにしたcssをご紹介します。css自体は難しくないですが、忘れたとき用で更新します。
button要素をクリックしたときに青色の線が表示されないようにするためのcss
cssファイルに下記を追加してください。
button:focus {
outline: none;
}
まとめ
下記の記事でも紹介していますが、<button>要素はデフォルトのスタイルが適用されるので必要に応じてcssで消したり、PCとスマホでスタイルが変わらないようにする必要があります。
スマホとPCでデザインが変わってしまう要素
スマホでブラウザチェックをするまで気づかないPCとデザインが変わってしまう要素について記事にしています。