[Edit]

CSS - style input file field

1 contributors

2 contributions

0 discussions

0 points

Created by:

Eshaal-Wilkinson

774

In this article, we would like to show you how to style input file field using CSS.

Practical example

Edit

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.

xxxxxxxxxx
 
<!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>