css 自定义文件输入|标签的CSS

Posted 2021-05-13

var noFileMessage = 'No file chosen';

        $('.custom-file .btn').click(function () {
            $(this).siblings('input[type=file]').focus().click()
        })

        $('.custom-file input[type=file]').change(function () {
            var fileName = $(this).val().split('\\').pop();
            var fileNameArea = $(this).siblings('.file-name');

            if (fileName.length)
                fileNameArea.text(fileName)
            else
                fileNameArea.text(noFileMessage)

        })

<div class="custom-file">
    <input type="file" required/>
    <span class="btn form-btns less-padd">Choose File</span>
    <span class="file-name">No file chosen</span>
</div>

.custom-file {
  font-size: 16px;
  clear: both;
  width: 100%;
  display: table;
  font-family:'calibri';

  input[type=file] {
    display: none;
  }
  .btn {
    float: left;
    margin-right: 12px;
    background-color: #5591dc;
    padding: 5px 20px;
    color: #fff;
    border-radius: 0;
    cursor:pointer;
  }

}

.file-name {
  padding: 4px 5px 0 0;
  float: left;
}