ホームページ > ウェブフロントエンド > CSSチュートリアル > JavaScript を使用せずにブラウザ間でファイル アップロード ボタンのスタイルをカスタマイズするにはどうすればよいですか?

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

DDD
リリース: 2024-12-17 09:43:26
オリジナル
438 人が閲覧しました

How Can I Customize File Upload Button Styling Across Browsers Without 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート