Regarding the method of constructing a custom file input.
You have the option to utilize either a span or a div, both of which are neutral tags like many others and can have their display style reset.
span is typically used for phrasing content (text, images, inputs, etc.),
div can contain any block or phrasing content.
To customize your input, you can associate it with a label. This way, the label will trigger the click event for the input allowing you to select a file for uploading.
The linking of input and label is done using the attributes id and for. For example:
<input id="zeInput"type="file"> <label for="zeInput" > click me </label>
By hiding the input element and styling the label, it will still function as intended.
You can then style either a wrapper containing both input and label, or just the label itself.
Here are two examples incorporating an icon from Font Awesome (replacing the image for demonstration purposes):
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css);
.inline-box {
display: inline-block;
}
.customIpF {
color: rgb(112, 114, 141);
border: solid;
border-radius: 0.5em;
padding: 0.25em 1em;
font-weight: bold;
font-size: 18px;
cursor: pointer;
}
.customIpF i,
.customIpF img {
font-size: 1.5em;
vertical-align: middle;
}
label {
cursor: pointer;
}
.customIpF input[type="file"] {
display: none;
}
<div class="inline-box customIpF">
<input type="file" name="filex" id="filex" class="inputfilex" />
<label for="filex">
<span>Upload your image</span>
<i class="fas fa-file-upload" ></i><!-- or use an img here -->
</label>
</div>
Alternatively, you can style just the label itself:
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css);
.inline-box {
display: inline-block;
}
.customIpF {
color: rgb(112, 114, 141);
border: solid;
border-radius: 0.5em;
padding: 0.25em 1em;
font-weight: bold;
font-size: 18px;
cursor:pointer;
}
.customIpF i, .customIpF img {
font-size: 1.5em;
vertical-align: middle;
}
input[type="file"].inputfilex {
display: none;
}
<input type="file" name="filex" id="filex" class="inputfilex" />
<label for="filex" class="inline-box customIpF">
<span>Upload your image</span>
<i class="fas fa-file-upload" ></i><!-- or use an img here -->
</label>
View react jsfiddle