LoginSignup
1
4

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-03-31

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;
}
1
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
4