Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8920

Chormeでクリックした要素に枠線が付く現象

$
0
0

概要

chromeである要素だけクリックした時に黒い枠線が表示されることがあった

原因

対象要素にtabindex属性が付いていて、クリックした時に強調としてoutlineプロパティが設定される

そもそもなぜtabindexが付いたのか?

スライダーライブラリのslick.jsを使用しており、そこでtabindexが付与されるようになっていた

対処2種

  • tabindexを削除
  • outline: none;を設定

(そもそもスライダーの範囲の横に余白があり、その余白部分だけ枠線が表示されていた。なのでスライダーとそのコンテンツのサイズは合わせるようにすれば良い)

参考

tabindex - HTML: HyperText Markup Language | MDN

outline - CSS: カスケーディングスタイルシート | MDN

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


Viewing all articles
Browse latest Browse all 8920

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>