html [ボタン]が設定されている場合、押されたときにHTML送信ボタン

Question

美しいHTMLフォームボタンを設計しました（入力タイプ= "送信"用）。しかし、私は彼らが押されたときにもはや沈んでいないことに気づきます。通常、ボタンを押すとすぐに次のページに行くので、それは問題ではありません。そして、Firefoxでは、ボタンのテキストの周りに点線のアウトラインが表示されるため、少し目に見えます。しかし、ユーザーはSafariに大きな画像をアップロードしようとしましたが、ボタンが押されているか、画像がアップロードされていることはまったく明確ではありませんでした。

それでは、押されたときにそれを非常に明確にする素敵な国境を備えた様式化された提出物を持つための最良の方法は何ですか？ JavaScriptを使用して、それに応じて押し込みと未処理を検出し、クラスを変更することができますが、これを行う標準的な方法が簡単になることを望んでいると思いますか？そうでない場合、これに対処するための良いjQueryライブラリはありますか？

これが私が話していることです： http://jsfiddle.net/gctjq/

ちょうど見つけました jQuery UIボタンウィジェット！簡単な標準HTMLソリューションがなかった場合、これが私が探していたものだと思います。私はすでに他の要素にjQuery UIを使用しており、これをカスタマイズしてすべてのサイズと色のボタンを取得するのがどれほど難しいか疑問に思っています。1つの標準サイズと色に適しているようです。

Answer 1

以下を使用します。アクティブセレクター

ここで動作しているのをご覧ください

http://jsfiddle.net/gctjq/1/

注目に値するのは、それがすべての最新のブラウザの期待で機能することです...ドラムサウンド... すなわち！IE 8では一種の動作がありますが、代わりにテキストを入力することは許可されていません。代わりに背景画像を使用してテキストを入力して、すべてのブラウザで同じように見えることを確認します。送信ボタンを無効にして、データが送信され、処理されていることを使用することを非常に明確にしています。このようなことは、それが実際にあることを示しています。

<input type="submit" onclick="this.disabled=true;this.value='loading...'" />

Answer 2

ボーダーを指定すると、ブラウザのデフォルトスタイリングが多少削除されます。

押したときにボタンの外観を手動で指定する必要があります。

また、フォーム上の要素が焦点を合わせている場合、IEは送信ボタンに1pxの境界線を追加することに注意してください。それを取り除く唯一の方法（私が知っている）は適用することです border: none; ボタンに、別の方法で国境を模倣します。