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

カスタマイズされたファイル入力ボタンでブートストラップを強化する

その人気にもかかわらず、Twitter Bootstrap には現在、視覚的に魅力的なファイル要素のアップロード ボタンがありません。ボタンは CSS では操作できないネイティブのブラウザ要素のままですが、その外観をカスタマイズするための実行可能なソリューションがあります。

ブートストラップ 3-5: シンプルな HTML ソリューション

HTML だけを利用すると、次のことが可能です。ボタンに似た機能的なファイル入力コントロールを作成します:

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

IE9 を含む最新のブラウザは、すぐにサポートされます。このアプローチ。ただし、古い IE バージョンとの互換性を確保するには、次の従来のアプローチを検討してください。

古い 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 でラベルをクリックしたときにファイル入力がアクティブ化されないことを補います。方法:

• ファイル入力をコンテナの幅/高さ全体に広げる
• ファイル入力要素を隠す

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