Nice File Input Button

Does this work on mobile, though?

by David Iglesias

HTML

<label class="selector_styler" for="file_selector">
  <input type="file" value="select" class="invisible_selector" id="file_selector" />
</label>

CSS

* { box-sizing: border-box; font-family: sans-serif; }

html { height: 100%; display: flex; }
body { flex: 1; }

.invisible_selector {
  position: absolute;
  inset: 0;
  display: none;
}

.selector_styler {
  display: block;
  position: relative;
  /* This should be 100%x100% for the flutter HtmlElementView */
  width: 320px;
  height: 100px;
  /* Only to make the fiddle visible! */
  border: 1px outset red;
  background: #fabada;
  border-radius: 8px;
  cursor: pointer;
}