デイトラWeb制作コース学習記録番外編 ファイル選択ボタンをbutton要素でスタイリング

ここでハマってしまいました。余裕がある人向けの課題で、無理にこなす必要はありませんが全部実践すると決めているのでやります。ベースはデイトラの回答例コードを使用しています。

手始めに「input type file label」「input type file デザイン」「input[type file カスタマイズ」等いろんなキーワードで検索してみました。そこで一番上に表示されたのがこちらの記事でした。

https://zenn.dev/dqn/articles/7505cfa1bed278

これは見過ごせない内容ですね。アクセシビリティには配慮したいため、label要素を使わない方法を試してみることにしました。

目次

button要素など別のタグを使う

input type=”file”要素を input type=”submit”要素に被せる技(2012年)

https://devadjust.exblog.jp/16866976/

これも上から別の要素を被せる方法ですね。(2012年)

解説が細かく参考になるページです。これも上から別の要素を被せる方法。(2014年)

https://lab.sonicmoov.com/markup/input-type-file/

こちらはjQueryをHTML内に記述する方法です。(2014年)

https://qiita.com/shimayu/items/605ecac3eeec50dd4f93

こちらはpタグを使った方法です(2016年)

https://qiita.com/9ooky/items/32c1a42a2c1d5503b282

こちらはbutton要素を使った方法です。(2017年)

https://qiita.com/comy/items/a9eac1de51f9fb1dfcca

コード例

元々のデイトラのコード+@comyさんのQiitaのコードで実装しました。

<div class="form-file">
  <input id="your-file" class="form-file__select" type="file" name="your-file" style="display:none">
  <button class="form-file__button">ファイルを選択</button>
  <div class="your-file-attention">※ ○MB以下<br>※ pdfのみ</div><!-- /.your-file-attention -->
  <div id="your-file-result" class="form-file__result">
    <input id="your-file-value" type="text" class="form-file__result-input" value="test" disabled>
   <span id="your-file-close" class="form-file__result-close"></span>
  </div>                
</div>
.form-file__button {
  background: $color-main;
  color: #fff;
  font-weight: 700;
  text-align: center;
  border-radius: 8px;
  border: 1px solid rgba(#000, 0.16);
  cursor: pointer;
  padding: 8px 36px;
  display: inline-block;
}
$('.form-file').on('click', 'button', function () {
  $('#your-file').click();
  return false;
});

//ファイル名を表示
$('#your-file').change(function() {
  $('#your-file-value').val($(this).prop('files')[0].name);
  $('#your-file-result').show();
  $(this).val('');
});

//閉じるボタン
$('#your-file-close').on('click', function() {
  $('#your-file-result').hide();
  $('#your-file-result').val('');
});

ひとつ山を越えられました!次は本編に戻ります。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

CAPTCHA


目次