[解決済み] <input type="file">をカスタマイズする方法は？

質問

の外観を変更することは可能ですか？ <input type="file"> ?

解決方法は？

については、あまり修正することができません。 input[type=file] コントロールそのものです。

をクリックすると label 要素が入力と正しくペアになっていれば、その入力がアクティブになったりフォーカスが当たったりします。 label を使えば、OSのブラウズダイアログを起動することができます。

その方法をご紹介しますと...。

label {
   cursor: pointer;
   /* Style as you please, it will become the visible UI component. */
}

#upload-photo {
   opacity: 0;
   position: absolute;
   z-index: -1;
}

<label for="upload-photo">Browse...</label>
<input type="file" name="photo" id="upload-photo" />

フォームコントロールの CSS は、不可視に見えるようにし、ドキュメントレイアウトのスペースを取らないようにしますが、その場合でも 存在する でアクティブにすることができます。 label .

ユーザーが選択したパスを選択後に表示したい場合は、リスト内の change イベントをJavaScriptで実行し、ブラウザが利用可能にしたパスを読み取ります（セキュリティ上の理由で 嘘 正確なパスについて、あなたに説明します)。エンドユーザーのためにそれをきれいにする方法は、単に返されたパスのベース名を使用することです（そうすれば、ユーザーは単に選択されたファイル名を見るだけです）。

がありますが、これは Tympanusによる素晴らしいガイド を使用したスタイリングです。