ブラウザ間でのファイル アップロード ボタンのスタイルのカスタマイズ
JavaScript に頼らずにファイル アップロード ボタンの外観をカスタマイズするのは難しい場合があります。ただし、label タグを利用して目的の結果を達成する、シンプルで効果的な手法が存在します。
タグ
CSS スタイリング
label.myLabel input[type="file"] { position: absolute; top: -1000px; } /***** Example custom styling *****/ .myLabel { border: 2px solid #AAA; border-radius: 4px; padding: 2px 5px; margin: 2px; background: #DDD; display: inline-block; } .myLabel:hover { background: #CCC; } .myLabel:active { background: #CCF; } .myLabel :invalid + span { color: #A44; } .myLabel :valid + span { color: #4A4; }
ファイルアップロード入力は非表示になっており、CSSを使用して周囲のラベルを自由にスタイル設定できます。たとえば、次のコードはカスタマイズされたファイル アップロード ボタンを示しています:
HTML 実装<label class="myLabel"> <input type="file" required/> <span>My Label</span> </label>
以上がJavaScript を使用せずにブラウザ間でファイル アップロード ボタンのスタイルをカスタマイズするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。