Custom File Input

<!-- HTML Block --> <label title="Choose a file!"> <input type="file" onchange="this.parentNode.title=this.value;"> </label> <!-- CSS Block --> <style> * { margin:0; padding:0; } body { background-color:white; font:normal normal normal 16px/1.4 Helmet,FreeSans,Sans-Serif; color:black; padding:5%; } label { display:block; height:200px; line-height:200px; text-align:center; cursor:pointer; position:relative; background-color:#C6EDCE; } label:before { content:attr(title); display:block; } input { display:block; width:1px; height:1px; background:none; border:none; margin:0; padding:0; position:absolute; top:-1px; left:-1px; } /* default state */ label[title="Choose a file!"] {background-color:#D3DBDE} </style>
Click on `label` element, hidden `input[type=file]` element.

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.