In essence, my goal is to conceal the input file and use a button to select a file within the form.
When I utilize
<label for="input-file">Label</label>Here is a JSFiddle example :
input[type=file] { display: none; }
<form>
<input type="file" id="input-file">
<label for="input-file">
<button>Button</button>
</label>
<input type="submit">
</form>
When I place a button within the label, it functions as a submit button. If I specify its type, clicking it has no effect.
Is there a way to upload a file within the form using my own button or a button-like control instead of using the input type="file"?
This needs to be achieved using HTML and CSS only, without involving any JavaScript or frameworks.
UPDATE:
This CSS snippet appears to style the label to resemble a standard button:
label {
appearance: button;
-moz-appearance: button;
-webkit-appearance: button;
text-align: center;
padding: 2px 6px 3px;
border: 2px outset buttonface;
font: 13.3333px Arial;
}