Twitter Bootstrap のファイル入力ボタンをカスタマイズするにはどうすればよいですか?

Twitter Bootstrap でのファイル入力ボタンのカスタマイズ

Twitter Bootstrap では、ファイル入力要素にはボタンの洗練されたデザインがありません。ただし、HTML を使用してカスタマイズ可能なアップロード ボタンを作成する簡単な解決策があります。

メソッド:

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

このアプローチでは、非表示の HTML5 属性を利用して機能的なアップロード ボタンを作成します。ボタンとして表示されるファイル入力コントロール。ボタンのスタイルはプライマリ ボタン クラスから継承されます。

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

隠し属性をサポートしていないブラウザ (IE8 以前など) の場合は、次を使用します。このCSSとHTML:

HTML:

<span class="btn btn-primary 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;
}

この手法により、古い IE バージョンとの互換性が確保されます。 .

追加情報:

詳細と例については、次の包括的な記事を参照してください:

https://www.a Beautifulsite.net/posts/whipping-file-inputs-into-シェイプウィズブートストラップ-3/

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