Note: The following is a brief overview of how to style the input element and visually hide the label while ensuring accessibility.
It's important to address various accessibility issues, such as indicating which file has been selected.
This example demonstrates how you can customize the input styling while retaining its native functionality (e.g., active state) without the need for manual implementation. Also, remember to include a custom focus indicator like input:focus::before.
Consider browser support and potential fallbacks; although untested, in theory, this method should degrade gracefully.
For additional features, such as displaying the selected file name, refer to this CodePen.
input{
color: transparent;
width:150px;
height:28px
}
input::-webkit-file-upload-button {
visibility: hidden;
}
input::before {
content: 'Select a PDF';
color: black;
display: inline-block;
border: 1px solid #999;
border-radius: 3px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
text-shadow: 1px 1px #fff;
font-weight: 700;
font-size: 10pt;
width:132px;
}
input:hover::before {
border-color: black;
}
input:active {
outline: 0;
}
label {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap; /* added line */
}
<input id="input" class="input" name="newFile" type="file" accept=".pdf" data-required="true"/>
<label for="input">upload file</label>