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>