最もシンプルなinput="file"のスタイル

  • 1
    Like
  • 0
    Comment

DEMO(CODEPEN)

デモはこちら

HTML

<input type="text" id="attach_file_name" class="attach_file_name" readonly/>
<label for="attach_file" class="attach_file_button">Browse
  <input type="file" name="attach_file" onchange="onchange_attach_file(this)" id="attach_file"  class="file_input"/>
</label>

CSS

input.file_input {
    display: none;
}
input.attach_file_name {
  padding: 4px;
}
/* like button */
label.attach_file_button {
 display:inline-block;
 background: #ccc;
 border: outset 1px #ccc;
 padding: 4px;
 cursor: pointer;
}

JavaScript

function onchange_attach_file(source) {
 document.getElementById('attach_file_name').value = source.value;
}