くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

クリックやタップしたときの青い枠や四角を消すCSS

クリックやタップするとなぞの青い枠や四角が。。
いろいろ調べたら、消せるらしいので、その時の備忘録。

クリックしたときの青い枠線

buttonやinputをクリック・フォーカスしたときに、
なぞの青い枠線が出てきたけど、色があってなくて、消したい。。

その場合は、outlineを設定するとよいらしい。

*:focus {
  outline: none;
}

タップしたときの青い四角

スマホでボタンやリンクをタップすると、
押したことが分かるように選択した要素が青く光る。

色があってなかったり、別で指定したりするので無効化したい。。

tap-highlight-colorというらしく、透過させると無効化できるらしい。

a {
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  cursor:pointer;
}

cursorがpointerじゃないと効かないらしいので、合わせて設定。
また、Androidは無効化だけだけど、iOSだとハイライトカラーを変えれるらしい。

以上!!

参考にしたサイト様