Una manera para obtener un buen resultado es la de añadir más html entorno a estos elementos, así que con un poco de css es posible darle un toque moderno.
Por suerte el jQuery puede ayudarnos. Hice un pequeño plugin para estilizar el input del tipo file, podéis descargarlo en los enlaces a continuación:
jquery.uploadButton.zip
jquery.uploadButton.min.zip
La única dependencia por supuesto es el jQuery, ya que la imagen que utilicé para este plugin, la que sostituye el botón del elemento, está incrustada en el código javascript mismo.
Como utilizarlo:
<script type="text/javascript" src="jquery.uploadButton.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#fichero').uploadButton({});
});
</script>
...
<form action="#" method="post" enctype="multipart/form-data">
<input type="file" id="fichero" name="fichero" />
</form>Valores por defecto:
width: 200px
height: 22px
paddingHeight: 4px
paddingLeft: 4px
background: white
borderRadius: 5px
borderColor: #ddd
borderColorOver: blue
borderWidth: 2px
borderStyle: solid
buttonImage: imageSrc
buttonWidth: 32px
buttonHeight: 32px
buttonChange: true
buttonMargin: 4px
ej:$(‘#fichero’).uploadButton({
‘width’: ’265px’,
‘buttonImage’: ‘img/myImage.png’,
‘buttonWidth’: ’24px’,
‘buttonHeight’: ’24px’
});
Como podeís ver, es posible cambiar la imagen del botón, y también cambiar el tamaño de este, cambiando los valores buttonWidth y buttonHeight. Sin embargo el botón es doble, cambia aspecto después que se ha elegido un fichero cambiando el valor background-position al valor negativo de buttonHeight, es decir, en el caso que utilizamos los valores por defecto: background-position: 0 -32px. Si no queréis este comportamiento, o sea, el botón no debe cambiar su aspecto, tenéis que impostar el valor buttonChange a ‘false‘.
Para alejar o acercar el botón de la casilla dónde se muestra el nombre del fichero, vamos a cambiar el valor de buttonMargin. No olviden que el valor borderRadius funcionará solo en aquellos navegadores que soportan el Css3. ¡A disfrutar!