Styling an input type=”file” button with CSS
In this tutorial, we are going to see how to customize an input type=”file” button with CSS. Create a customized file type input that matches the rest of the form. Like the checkbox, HTML5’s file type input does not respond to many rare custom styles that often work behind prefixes and do not behave consistently across browsers. the following example shows you how to change the browse button of input type=”file”.
CSS Code:
.parent-div { display: inline-block; position: relative; overflow: hidden; } .parent-div input[type=file] { left: 0; top: 0; opacity: 0; position: absolute; font-size: 90px; } .btn-upload { background-color: #fff; border: 3px solid #000; color: #000; padding: 10px 25px; border-radius: 10px; font-size: 22px; font-weight: bold; }
HTML Code:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Styling an input type="file" button with CSS</title> <style> /* Put the CSS Style Here */ </style> </head> <body> <div class="parent-div"> <button class="btn-upload">Choose file</button> <input type="file" name="upfile" /> </div> </body> </html>
Result |
---|
|