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

ファイル アップロード ボタンのクロスブラウザー カスタム スタイル [重複]

概要:

ファイル アップロード ボタンのスタイル設定は次のとおりです。ブラウザで定義された寸法のため、困難です。従来のアプローチには JavaScript や Quirksmode の技術が含まれることが多く、制限がある場合があります。ここでは、JavaScript を必要としない、よりユーザーフレンドリーで効果的なソリューションを検討します。

答え:

シンプルで効率的な方法には、 を使用することが含まれます。隠しファイルのアップロードをタグで囲むボタン。

HTML:

<label class="myLabel">
    <input type="file" required/>
    <span>My Label</span>
</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;
}

利点:

• JavaScript なし必須
• スタイルの自由度と制御が可能になります
• ブラウザ定義の入力サイズなしでブラウザ間の互換性をサポートします

このメソッドを使用すると、ファイル アップロード ボタンのスタイルを設定できますHTML と CSS を簡単に使用して、シームレスなユーザー インターフェイスと全体的な Web デザイン エクスペリエンスを向上させます。

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