Style File Input

To add custom style file inputs, include FileUI.js in the head section of your HTML.

Html:

<script src="fileUI.js" type="text/javascript"></script>

Example of file inputs with a custom button:

XHTML Markup

Html:

<span class="fileInputSpan"><input type="file" /></span>

Add this directly after all of your input fields.

Html:

<script type="text/javascript">
var styleInputs = FileUI
styleInputs.imgPath = 'browse.gif'
styleInputs.imgPathOver = 'browse_over.gif' // optional mouse over image
styleInputs.init()
</script>

Example of file inputs with a link for a button:

XHTML Markup

Html:

<span class="linkDemo"><input type="file" /></span>

Add this directly after all of your input fields.

Html:

<script type="text/javascript">
styleInputs.textOnly = 'ButtonText'
styleInputs.spanClass = 'linkDemo'
styleInputs.init()
</script>

Add some style to the link.

Html:

<style type="text/css">
.linkDemo a {
background: #000
color: #eee
padding: 1px
}
.linkDemo a.over {
background: #555
font-weight: bold
}
</style>