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