- 実際のコントロールを非表示にする
- 必要なコントロールとスタイリングでDIVを作成しました
ボタンは標準のHTMLコントロールではありません。
どうしたの
<input type="file" size="50" .... />
？ Macのサファリ以外は同じように見えます（Macでは、すべてのアップロードコントロールがすべてのブラウザで異なって見えます）
Quirksmodeチュートリアルに加えて、別の優れたリソースを次に示します。 http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
実際のコントロールを非表示にしている場合は、visibility: hiddenを実際に使用せずに、コントロールの不透明度をゼロに設定することが非常に重要であることを忘れないでください。これを行うと、実際に要素が非表示になり、クリックアクションが無効になります。
また、コントロールをグラフィックボタンで覆う場合、一部のブラウザー（FirefoxとIE、私は信じている）では、カーソルがテキストの上にあるときにカーソルタイプを手に変更できないことに注意してください。ファイルコントロールの入力部分（常にデフォルトの入力または通常の非リンクポインターになります）。はい、cursor: pointer（およびcursor: hand）を使用してみました。
個人的には、カスタマイズされたアップロードボックスに苦労しましたが、外観やカスタマイズを完璧にするための特効薬はありません。 （特にカーソルの動作に関しては、UIの問題を解決すると考えています）。結局のところ、異なるブラウザーが異なる方法でコントロールをレンダリングすることを受け入れる方が簡単だと思います。それがまさにその方法です。