ここでハマってしまいました。余裕がある人向けの課題で、無理にこなす必要はありませんが全部実践すると決めているのでやります。ベースはデイトラの回答例コードを使用しています。
手始めに「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('');
});
ひとつ山を越えられました!次は本編に戻ります。
コメント