Ownedmedia ウェブ制作に役立つコンテンツを発信中!

CSS 2016.03.17

リンクをクリックした後に表示される点線の枠を消す

Tags:
最終更新日:Update

aタグなどのリンクをクリックした後に表示される点線の枠について。これが残っているとちょっとデザイン的によろしくないですよね。CSSに少し加えるだけで消すことができます。

 

a,a:focus {
  outline:none;
}
button,input,input:focus {
  outline:none;
}
input::-moz-focus-inner, 
button::-moz-focus-inner  {
  border:none;
}

※firefoxは挙動が違うため、::-moz-focus-innerの指定で制御します。

 

リセット用のCSSに書いておけば便利ですね

 

この記事を書いた人

オガワ シンヤ

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?