JavaScript を使用せずに、どのブラウザーでも一貫してファイル アップロード ボタンのスタイルを設定するにはどうすればよいですか?

ブラウザ間でのファイル アップロード ボタンのスタイル設定

ブラウザの不一致により、ファイル アップロード ボタンのカスタマイズが困難になる場合があります。 Quirksmode の技術を使用した従来のアプローチでは、必ずしも望ましい機能やスタイルが提供されるとは限りません。要素

JavaScript に頼らずにファイル アップロード ボタンのスタイルを設定するより効果的な方法には、 を利用する方法があります。要素。隠しファイル入力を でラップすると、クリック イベントを入力フィールドに自然にリダイレクトできます。このアプローチにより、ブラウザーで定義された入力サイズと比較してスタイルの自由度が高まります。

実装の詳細

このアプローチにより、ファイル ボタンが確実に親 div のサイズ全体を変更することで、Quirksmode 手法で発生する問題を排除します。また、幅広いスタイル オプションが有効になり、ファイル アップロード ボタンの外観を完全に制御できるようになります。

<label class="myLabel">
    <input type="file" required>
    <span>My Label</span>
</label>

以上がJavaScript を使用せずに、どのブラウザーでも一貫してファイル アップロード ボタンのスタイルを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。