☰

Twitter Bootstrap フォーム ファイル要素 アップロード ボタン 質問する

tag-icon • tag-icon css forms twitter-bootstrap input-type-file
Twitter Bootstrap フォーム ファイル要素 アップロード ボタン 質問する

Twitter Bootstrap には、なぜ派手なファイル要素アップロード ボタンがないのでしょうか。アップロード ボタンに青いプライマリ ボタンが実装されていればすばらしいのですが。CSS を使用してアップロード ボタンを巧みに調整することは可能でしょうか。(操作できないネイティブ ブラウザー要素のようです)

ベストアンサー1

Bootstrap 3、4、5 のソリューションは次のとおりです。

ボタンのように見える機能的なファイル入力コントロールを作成するには、HTML のみが必要です。

html

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

これは、IE9+ を含むすべての最新ブラウザで動作します。古い IE のサポートも必要な場合は、以下に示す従来のアプローチを使用してください。

このテクニックは HTML5hidden属性に依存します。Bootstrap 4 は、サポートされていないブラウザーでこの機能をシムするために次の CSS を使用します。Bootstrap 3 を使用している場合は、追加する必要がある可能性があります。

[hidden] {
  display: none !important;
}

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

IE8 以下のサポートが必要な場合は、次の HTML/CSS を使用してください。

html

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

CS

.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 では、をクリックしてもファイル入力がトリガーされないことに注意してください<label>。そのため、CSS の「膨張」によって、これを回避するためにいくつかの処理が行われます。

  • ファイル入力を周囲の全幅/全高さに広げます<span>
  • ファイル入力を非表示にする

フィードバックと追加資料

この方法についての詳細と、選択されているファイルとその数をユーザーに表示する方法の例を投稿しました。

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

おすすめ記事