CSSのこの小さなビットを持つフォームのボタンの外観

Question

を変更し、自分のフォームのボタンは現在、（2D）とIかなり見た目のように平らに見える：

input { 
    border: 1px solid #999; 
} 

ただし、ファイルフィールド（アップロードするファイルを選択する）ための、ボタンはまだ3Dです。そして、境界線はそのボタンの周りにあり、その隣のテキストは移動します。

入力の名前を.inputに変更し、それを[送信/キャンセル]ボタンにのみ適用することでこの問題を解決しましたが、ファイルフィールドの外観に似ています。では、どのようにしてこれらを修正して、すべてが2D/2Dに見えるようにしますか？

また、これらのフォームボタンを通常のリンクとして作成する方法はありますか？私は彼らの見た目がとても好きです。私はRailsでプログラミングしていますので、ヘルパー関数があれば投稿することができればいいと思います。

Answer 1

このarticleは、あなたの代わりに送信ボタンを使用して、単一の単語に代わりにJavaScriptでのonclickイベントを添付することができ、通常のテキストリンクとして送信ボタンを作成するには、ファイルの入力ボタン

Answer 2

のスタイルを素敵なトリックを説明しています。

Answer 3

http://extjs.com/forum/showthread.php?t=29032
このスレッドでは、スタイルを設定できる入力ボタンを作成するためにExtJSライブラリを使用しています。私は必ずしもExtJSを単独で使用するとは限りませんが、ファイルボタンのコードを見てみたいと思っているのであれば、画像の上にファイルボタンを配置し、それがうまく機能するまで調整する代わりに、このJavascriptの部分は、マウスがどこにいても実際にボタンを中央に配置します。あなたはすべての形とサイズの非常に空想的な探しているボタンを作成することができます。