EN
CSS - style input file field
0
points
In this article, we would like to show you how to style input file field using CSS.
Practical example
In this example, we use attribute selector to set file input display property and hide the element. To actually style the input, we style the label element which is the hidden input wrapper.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
input[type="file"] {
display: none;
}
.custom-input {
border: 2px solid red;
background: yellow;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
</style>
</head>
<body>
<label class="custom-input">
<input type="file"/>
Upload file
</label>
</body>
</html>