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

JavaScript を使用しないファイル アップロード ボタンのスタイル設定

ファイル アップロード ボタンをカスタマイズする多くの試みは、JavaScript または Quirksmode のアプローチに頼ることが多く、これには寸法と自動調整の点で制限があります。この記事では、 を使用したハック性の低いソリューションを検討します。タグ。

の活用タグ

要素を使用すると、JavaScript を使用せずにファイル アップロード ボタンのスタイルを設定できます。クリック イベントをその子要素に転送し、非表示のファイル アップロード ボタンのラッパーとして使用できるようにします。

コード例

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

label.myLabel input[type="file"] {
    position:absolute;
    top: -1000px;
}

.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;
}

この例では、非表示にします。ファイルアップロードボタンはposition:absoluteとtop:-1000pxを使用し、のスタイルを設定します。必要に応じてタグを付けます。ラベルはクリック イベントを受信し、非表示の入力ボタンに転送します。

このアプローチの利点

• Webkit の組み込みスタイルと比較して、スタイルの柔軟性が向上します。
• JavaScript は必要ないため、より効率的です。
• の制限を克服します。 Quirksmode のアプローチにより、ファイル ボタンが親コンテナ全体を埋めることができるようになります。

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