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

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

Mary-Kate Olsen
Mary-Kate Olsenオリジナル
2024-12-10 07:28:09720ブラウズ

How Can I Style File Upload Buttons Without JavaScript?

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

ファイル アップロード ボタンをカスタマイズする多くの試みは、JavaScript または Quirksmode のアプローチに頼ることが多く、これには寸法と自動調整の点で制限があります。この記事では、

コード例

<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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。