How To Create HTML Custom File Input and CSS Styling
Category: CSS
There are quite a few techniques for “customizing” the <input type="file" /> element. Probably the worst technique was the one where the input element is put into a container (which imitates a button), and the input follows the cursor so that when you click anywhere on the container, you actually click the input. How do you know that an element on the website is pressable? Firstly, the element should communicate a feeling that you can tap or click on it. Secondly, the cursor icon should change to an appropriate one when hovering the element. for that case, we must keep cursor: pointer.
Follow the instructions for custom file input in HTML:
HTML Part
<input type="file" class="custom-file-input">
CSS Part
.custom-file-input {
color: transparent;
display:block;
margin-top:100px;
margin-left:100px;
cursor:pointer;
}
.custom-file-input::-webkit-file-upload-button {
visibility: hidden;
}
.custom-file-input::before {
content: 'Select some files';
color: #222;
display: inline-block;
background: orange;
border: 1px solid orange;
border-radius: 3px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
font-weight: 600;
font-size: 12pt;
}
.custom-file-input:hover::before {
border-color: black;
}
.custom-file-input:active {
outline: 0;
}
.custom-file-input:active::before {
background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}
body {
padding: 20px;
}
OUTPUT