Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> label.label input[type="file"] { position: absolute; top: -1000px; } .label { cursor: pointer; border: 1px solid #cccccc; border-radius: 5px; padding: 5px 15px; margin: 5px; background: #dddddd; display: inline-block; } .label:hover { background: #5cbd95; } .label:active { background: #9fa1a0; } .label:invalid + span { color: #000000; } .label:valid + span { color: #ffffff; } </style> </head> <body> <form action="/form/sumbit" method="get"> <label class="label"> <input type="file" required/> <span>Select a file</span> </label> </form> </body> </html>