[CSS]フォームのボタンのクリック時の点線を消去するスタイルシート

Firefoxで、フォームのボタン(submit, button)のクリック時に表示される点線を消去するスタイルシートを紹介します。

デモのキャプチャ

Remove Dotted Outline For Buttons in Firefox Using CSS
デモページ(当方作成)

[ad#ad-2]

この中途半端な点線はFirefox固有のもので、Chrome, Safari, Operaでは表示されず、IEではボタンの内側に表示されるものです。

スタイルシートのスタディ

HTML

シンプルにsubmitボタンを使用します。

<input type="submit" />
デモのキャプチャ

デモページ(当方作成)

クリック時に中途半端な点線が表示されています。

CSS:outline:none;

「outline」を試してみます。

input{
	outline:none;
}
デモのキャプチャ

デモページ(当方作成)

[ad#ad-2]

Firefoxで試したところ、点線の表示に変化はありませんでした。ただし、IE8で内側の点線を消去することができます。

CSS:border :0px;

「border」を試してみます。

input{
	border :0px;
}
デモのキャプチャ

デモページ(当方作成)

点線が消えないどころか、デザインが変わってしまいました。

CSS:border:0px;(focus-inner)

「border」を「focus-inner」で使用してみます。

input[type="submit"]::-moz-focus-inner{
	border :0px;
}
デモのキャプチャ

デモページ(当方作成)

Firefoxで期待通りに点線の表示が消えました。

sponsors

top of page

©2024 coliss