CSSを使ったSafari入力ファイルのスタイリング？

Question

Safari、Chrome、その他のWebKitベースのブラウザでは、どのようにフォーム入力フィールドにfileのスタイルを入力しますか？

現在のところ、私はです。通常のテキスト入力ボックスの上に表示されるファイルボタンを選択してください。

私はGoogleでちょっと見たことがありますが、本当に役立つものは何も見かけませんでした。

Answer 1

私はあなたができるとは思わない。 Appleは最近、フォームコントロールのスタイリングを有効にすることを決めました。彼らは、ボタンのように見えないときはボタンや入力を見つけるのが難しいと考えています。そのため、まだファイルアップロードの入力をスタイルすることはできません。

私は約90％があなたがそれを行うことはできません。それだけ、それは新しいセッションを行い、ブラウザと同じセッションでは、他のすべてのたブラウザにIEで働いているので、あなたがあなたの背中から追い出されます

：フラッシュアップローダーがさらに苦痛を与えることができます持つ

Answer 2

エンドセキュアアプリ。

唯一の解決策は、セッションデータをFlashに送信することです...そこに行く！

私はSafariのファイル入力項目のスタイルや見た目を見てこのページに着いた...私は150pxの幅のテーブルセルにたくさんあるが、これらの入力はそれを大きくしている。

これまでの解決策は1つしか見つかりませんでした。それはstyle="position:absolute;z-index:2"を使用して残りの部分を浮かせることです。私のTDはposition:relativeのスタイリングを持っています。

これは悪い悪い解決策です、私は知っています！

Answer 3

のFirefox 4は、（方法についてラウンドで）あなたのスタイルの入力要素をできるようになる：link

うまくいけば、他のブラウザでは、これが削除されますどのような巨大な痛みのポイントにキャッチします。

Answer 4

Webkitブラウザに興味がある場合は、組み込みの擬似セレクタを使用してファイル入力要素のさまざまな部分を対象にすることができます。例えば、input::-webkit-file-upload-button {...}である。

Answer 5

ほんの少し前私はinput="file"をCSS（主に余分なエフェクトを含むCSS3）でスタイル設定する作業がありました。

私はjQueryプラグインを作成しました（またはfilestyleプラグインを少し書き直しました）。そのコアビヘイビアは画像と同じですが、私は完全に画像をspanとdivに置き換えました。プラグインはinput="file"を隠し、CSSでラッパーを構築し、最後に非表示の入力に対してクリックアクションをトリガーします。

私はそれが誰にとっても役立つことを願っています。

Here's an example of how to style input="file" with only CSS.

Answer 6

すべてのレンダリングエンジンが自動的に作成されたボタンを生成します。歴史的に、そのボタンは完全にスタイルが変更できませんでした。しかし、最近TridentとWebKitは疑似要素を使ってフックを追加しました。トライデント

はIE10のようにファイル入力ボタン::-ms-browse擬似要素を使用してスタイルすることができます。基本的には、通常のボタンを適用するすべてのCSSルールを擬似要素に適用できます。例：Windows 8の上のIE10で次のように

<input type="file"> 

::-ms-browse { 
    background: black; 
    color: red; 
    padding: 1em; 
} 

これが表示されます。

WebKitの

WebKitが::-webkit-file-upload-button擬似でそのファイル入力ボタンのフックを提供します素子。ここでもほとんどすべてのCSSルールを適用することができ、したがって、トライデントの例は、ここにも動作します：OS X上でクロム26で次のように

<input type="file"> 

::-webkit-file-upload-button { 
    background: black; 
    color: red; 
    padding: 1em; 
} 

をこれが表示されます。