JavaScript を使用せずにブラウザ間でファイル アップロード ボタンのスタイルをカスタマイズするにはどうすればよいですか?

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

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>

この手法を HTML で実装するには:このアプローチを使用すると、JavaScript を使用せず、また、ファイル アップロード ボタンのスタイルを完全に制御できます。ブラウザ定義の入力寸法

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