You can style an input file with CSS just like any other HTML element. However, due to browser security restrictions, default appearance of input file cannot be entirely customized as easily as other input types. You can either use some hacks or use more indirect methods, such as creating a styled label that triggers the input file. Here’s an example:
HTML:
```
```
CSS:
```
.inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
inputfile + label {
cursor: pointer;
padding: 10px;
background-color: #2f90ff;
color: #fff;
}
.inputfile:active + label,
.inputfile:focus + label {
background-color: #007bff;
}
```
In this example, styling is applied via a label that is associated with the input by using the “for” attribute. The real (but hidden) file input then responds to the clicks on the label element. The hidden file input remains functional and can still be tab-focused and activated using the keyboard, which is important for accessibility.
Since different browsers behave differently, more efforts are needed if you want to achieve perfect cross-browser consistency. You might also consider using a JavaScript/jQuery plugin for styling file uploads if you want more advanced features.
