フォームのファイル装飾

2020/06/28 Sora

HTML

<div class="form_fileWrapper"><label for="file1"><input type="file" name="ファイル1" id="file1"></label></div>

CSS

.form_fileWrapper label{
    position: relative;
    display: inline-block;
}
.form_fileWrapper label:before{
    content: "ファイルを選択";
    display: block;
    background-color: #FFFFFF;
    border: 1px solid #999999;
    border-radius: 5px;
    font-size: 1.13rem;
    line-height: 1.5;
    text-align: center;
    padding: 10px;
    max-width: 100%;
    width: 270px;
    transition: 0.3s background ease;
}
.form_fileWrapper label:hover:before{
    cursor: pointer;
    background-color: #eeeeee;
}
.form_fileWrapper input[type="file"]{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;    
    cursor:pointer;
    opacity:0;
}

JS

//フォームのファイル装飾
$(function() {
  $('input[type=file]').after('<span class="file_name">選択されていません</span>');
  $('input[type=file]').change(function() {
    var file = $(this).prop('files')[0];
      $(this).next('.file_name').html(file.name);
  });
});