入力ファイルの制御と美化について

一部のWebサイトでアップロードする場合、「参照」ボタンをクリックすると、[ファイルの選択]ダイアログボックスが表示されます。この機能を実現するには、入力ファイルコントロールを使用するだけです。

効果画像は次のようになります。

知らせ！これはテキストとボタンで構成されているとは思わないでください。これは実際にはファイル コントロールです。

今日、仕事で「ファイルが選択されていません」と表示しないという要件に遭遇しました。1 時間ほどいじくった後、幅の値を設定すると問題が解決することがわかりました。

コード: <input type="file" value="ファイルを選択" />

幅の値は、以下に示すように 70px に設定されています。

【美化】

アイデア:

外側の div は、内部の入力の位置参照を提供するためのものです。スタイルを記述するときには相対的な位置指定が必要なため、実際のファイル コントロールがシミュレートされたファイル コントロールを覆い、ファイル コントロールを非表示にします (ファイル コントロールが表示されていない場合でも)。

効果：

入力ファイルのコントロールと美化に関する上記の記事は、エディターがあなたと共有するすべてのコンテンツです。これが参考になれば幸いです。また、123WORDPRESS.COM をサポートしていただければ幸いです。