Bootstrap でカスタム ファイル アップロード ボタンを作成するにはどうすればよいですか?

Bootstrap を使用したカスタム ファイル アップロード ボタン

Twitter Bootstrap のデフォルトのファイル入力要素は見た目の魅力に欠ける可能性がありますが、プライマリの青いボタンの外観を模倣するカスタム ボタン。

を使用した解決策HTML:

Bootstrap 3、4、および 5 では、簡単な HTML ソリューションが利用可能です:

<label class="btn btn-default">
    Browse <input type="file" hidden>
</label>

この非表示の入力要素は、ファイル入力コントロールを維持しながら通常のファイル入力コントロールとして機能します。カスタム ボタンのスタイル。

高齢者向けの従来のアプローチブラウザ:

IE8 以前との互換性が必要な場合は、次の HTML/CSS を使用してください。組み合わせ:

HTML:

<span class="btn btn-default btn-file">
    Browse <input type="file">
</span>

CSS:

.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

このメソッドには追加の CSS が必要ですが、古い IE ブラウザとの互換性を確保します。

追加注:

HTML ソリューションに入力された隠しファイルは HTML5 の隠し属性に依存していることに注意してください。さらに古いブラウザのサポートが必要な場合は、従来のアプローチを使用できます。

選択したファイルを表示する方法の詳細と例については、次のリソースを参照してください:

https:/ /www.abeautysite.net/posts/whipping-file-inputs-into-shape-with-bootstrap-3/

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