How to style the "Search Computer" File Upload button for eMail Contact Form 7?

I have a standard "Contact Form 7" Send File as Attachment Form on wordpress:

<label>UPLOAD FILE
[file uploadedfile]
</label>

I am already searched stackoverflow etc etc etc. After 2hrs I gave up :(

How can I change the Color of the background and the font size easily?

If I get in touch with the file form control directly it will blast up like a giant. This is not useful for computers and never responsiv für mobile.

And as a second question.

Is it possible to format the "No file selected" differently from the "Search computer (Durchsuchen)"?

Solution

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.