じろう

2019年11月02日に参加

学習履歴詳細

[Laravel]課題アプリのデザイン。フォームのデザイン

今日のYWT

やったこと

Travelog

  • フォームのデザイン
  • 枠線の色を変える
  • ファイル欄をおしゃれにする

わかったこと

custom-input

<div class="form-group">
  画像ファイル（複数可)
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputFile" name="file[][photo]" multiple>
    <label class="custom-file-label" for="inputFile">ファイルを選択</label>
  </div>
</div>

このように、bootstrapでファイル選択フォームをカスタマイズしている場合にどのようにスタイルを当てるかが分からなかった。

.custom-file-input:focus~.custom-file-label {
  border-color: $third-color;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(32, 133, 12, 0.234);
}

と、このように指定してあげれば枠線の色と、枠線がfocus状態になったときの影のつき方を変えられる。

次やること

  • フォームデザイン最終決定
Laravel
Bootstrap

2020年11月12日(木)

2.6時間