[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で期待通りに点線の表示が消えました。