Twitter Bootstrap のファイル アップロード ボタンのスタイル設定
Twitter Bootstrap に見た目の美しいアップロード ボタンがないのは驚くべきことです。この要素が CSS を使用してカスタマイズできるかどうかという疑問が生じます。
HTML と CSS を使用したカスタマイズ
Bootstrap 3、4、および 5 の場合、機能的なファイル入力コントロール。ボタンに似たものは HTML だけで作成できます:
<label class="btn btn-default"> Browse <input type="file" hidden> </label>
このアプローチでは、次の隠し属性を利用します。 HTML5。この属性をサポートしていないブラウザの場合は、次の CSS を必ず含めてください:
[hidden] { display: none !important; }
古い IE のレガシー アプローチ
IE8 以前をサポートするには、HTML /CSS の変更が必要です:
<span class="btn btn-default btn-file"> Browse <input type="file"> </span>
.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 では、ファイルを 内で全幅/高さで入力するようにします。
以上がTwitter Bootstrap でファイル アップロード ボタンのスタイルを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。