[解決済み] Twitter Bootstrap Form File Element Upload Button（ファイルアップロードボタン

質問

twitter bootstrapには、なぜ派手なファイル要素のアップロードボタンがないのでしょうか？青いプライマリボタンがアップロードボタンとして実装されていれば最高なんですけどね。CSSを使ってアップロードボタンを細工することは可能でしょうか？(ブラウザのネイティブ要素のようで、操作できないようです。）

解決方法は？

Bootstrap 3、4、5用の解決策を紹介します。

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

HTML

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

これはIE9+を含むすべてのモダンブラウザで動作します。古いIEにも対応する必要がある場合は、以下に示すレガシーアプローチを使用してください。

このテクニックは、HTML5 の hidden 属性があります。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>

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ではファイル入力がトリガーされないことに注意してください。 <label> そのため、The CSS "bloat" はそれを回避するためにいくつかのことを行っています。

• ファイル入力を周囲の幅/高さいっぱいに表示します。 <span>
• ファイル入力を非表示にする

フィードバック＆追加情報

この方法の詳細と、どのファイルがいくつ選択されているかをユーザーに表示する方法の例を掲載しました。

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