Although it's difficult to style a file input itself due to browser compatibility, you can instead apply styling to its label to achieve the same result.
Take a look at this example input:
<label for="fileInput">
Upload file
</label>
<input id="fileInput" type="file">
Because the label is directly linked to the input, it will open the file browser once you click on either the label or the input. Since that's the case, you can hide the input itself and only display the label.
<style>
input[type="file"] {
display: none;
}
</style>
Now that you're left with only the label, you can apply styling to the element to make it look more like a button instead of a label. Take a look at this basic example of CSS you could use to style the label.
<style>
label[for="fileInput"] {
border: 1px solid black;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
</style>
Here's what you'll end up with after hiding the input and add styling to the label. Of course, this is just a basic example, but there are almost no limits to what you can achieve through CSS, so you could style the label any way you'd like.
Putting it all together, the final code for this implementation will look something like the following:
input[type="file"] {
display: none;
}
label[for="fileInput"] {
border: 1px solid black;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
<!doctype html>
<html>
<head>
<title>File upload styling</title>
</head>
<body>
<form method="post">
<label for="fileInput">
Upload file
</label>
<input id="fileInput" type="file">
</form>
</body>
</html>
Since you're using WordPress, you'll just end up putting the CSS in your theme styles, but the implementation should be almost identical as to what it would be with a static HTML site.
