joplin-notes/joplin notion extension/Web Development/CSS/Custom upload File Button.md
2026-11-04 00:33:23 +05:30

655 B

Custom upload File Button

<input type="file" id="actual-btn"/>
<label for="actual-btn">Choose File</label>
.input{
	display: none;
}

label {
  background-color: indigo;
  color: white;
  padding: 0.5rem;
  font-family: sans-serif;
  border-radius: 0.3rem;
  cursor: pointer;
  margin-top: 1rem;
}

  or instead of label div or other element can be used too  

<!-- default HTML file upload button -->
<input type="file" id="actual-btn" style="display: none;" />

<!-- custom file upload button using a <button> element -->
<div onclick="document.getElementById('actual-btn').click();">Choose File</button>