Skip to main content Skip to docs navigation Bootstrap 4 (安定版) はこちらです

File browser (ファイル)

クロスブラウザでの一貫したスタイリング、ビルトインのカスタマイズ、軽量な JavaScript を実現するために、カスタムファイル入力を使用します。

目次
カスタムファイル入力におけるアニメーションのための推奨プラグイン: bs-custom-file-input

Default

ファイルの入力はプレースホルダーの ”ファイルを選択…“ を選択したファイル名のテキストに変わるようにするには追加のJavaScriptが必要です。

<div class="form-file">
  <input type="file" class="form-file-input" id="customFile">
  <label class="form-file-label" for="customFile">
    <span class="form-file-text">Choose file...</span>
    <span class="form-file-button">Browse</span>
  </label>
</div>

<input>disabled 属性を追加すると、カスタムマークアップが無効になるように更新されます。

<div class="form-file">
  <input type="file" class="form-file-input" id="customFileDisabled" disabled>
  <label class="form-file-label" for="customFileDisabled">
    <span class="form-file-text">Choose file...</span>
    <span class="form-file-button">Browse</span>
  </label>
</div>

長いプレースホルダのテキストは切り捨てられ、スペースが足りない場合は “…” が追加されます。

<div class="form-file">
  <input type="file" class="form-file-input" id="customFileLong">
  <label class="form-file-label" for="customFileLong">
    <span class="form-file-text">Lorem ipsum posuere consectetur est at lobortis nulla vitae elit libero a pharetra augue fusce dapibus tellus ac cursus commodo tortor mauris condimentum nibh ut fermentum massa justo sit amet risus cras mattis consectetur purus sit amet fermentum</span>
    <span class="form-file-button">Browse</span>
  </label>
</div>

デフォルトのファイル <input>opacity で非表示にし、代わりに <label> のスタイルを設定し、<input>widthheight を宣言することで、周囲のコンテンツの適切な間隔を確保します。

Sizing

また、同じようなサイズのテキスト入力に合わせて、小さいファイル入力と大きいファイル入力を選択することもできます。

<div class="form-file form-file-lg mb-3">
  <input type="file" class="form-file-input" id="customFileLg">
  <label class="form-file-label" for="customFileLg">
    <span class="form-file-text">Choose file...</span>
    <span class="form-file-button">Browse</span>
  </label>
</div>

<div class="form-file form-file-sm">
  <input type="file" class="form-file-input" id="customFileSm">
  <label class="form-file-label" for="customFileSm">
    <span class="form-file-text">Choose file...</span>
    <span class="form-file-button">Browse</span>
  </label>
</div>