Twitter Bootstrap ファイルアップロードボタンの外観をカスタマイズするにはどうすればよいですか?

Twitter Bootstrap ファイル アップロード ボタンのカスタマイズ

Twitter Bootstrap にはファイル アップロード ボタン専用のスタイルがありませんが、その外観を改善する方法がいくつかあります。

Bootstrap バージョン 3、4、および 5 に適用できる 1 つのソリューションでは、HTML5 の隠し属性を利用して、ボタンに似た機能ファイル入力コントロール:

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

このアプローチは、互換性のために Bootstrap 4 が CSS でエミュレートする hidden 属性に依存します。 Bootstrap 3 の場合、次の追加 CSS が必要になる場合があります:

[hidden] {
  display: none !important;
}

古い IE のレガシー アプローチ:

IE8 以前では別の HTML/CSS が必要です構造:

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

.btn-file {
  /* ... */
}

.btn-file input[type=file] {
  /* ... */
}

注:

• 古い IE では、ラベルのクリック時にファイル入力をトリガーすることができません。
• CSS はファイルを拡張することで補います。スパンに一致するように入力して非表示にします。

詳細と例については、を参照してください。 Abeautysite によるブログ投稿: https://www.a Beautifulsite.net/posts/whipping-file-inputs-into-shape-with-bootstrap-3/

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