<html>
<body>
<form id="uploader-form" action="http://hotblocks.nl/_http_server.php">
<label for="fileinput" id="link" class="trigger-file-input">Link Label</label>
<br />
<label for="fileinput" id="button" class="trigger-file-input">Button Label</label>
<input type="file" id="fileinput" />
</form>
</body>
<script>
body { font-family: Helvetica; }
/* hide the file input. important to position it offscreen as opposed display:none. some browsers don't like that */
#fileinput { position: absolute; left: -9999em; }
/* an example of styling your label to look/behave like a link */
#link { color: #2a9dcf; font-size: 16px; }
#link:hover { text-decoration: underline; cursor: pointer; }
/* an example of styling your label to look like a button */
#button {
display: block;
width: 31px;
height: 27px;
text-indent: -9999em;
background: transparent url(http://www.afar.com/assets/profile_sprite.png) 0 0 no-repeat;
}
#button:hover {
cursor: pointer;
}
</script>
</html>
No comments:
Post a Comment