CSS: visualizzare il bottone di scelta dei file sulla destra nei browser basati su WebKit

L'unico problema reale con i campi dei form e i CSS è che questi elementi non sono stati definiti dalle specifiche del W3C a livello di formattazione predefinita. In pratica ciascun browser è libero di applicare i propri algoritmi e le sue proprietà ai campi dei form, rendendo di fatto molto difficile ottenere una resa cross-browser. Nei browser basati su WebKit, ad esempio Safari e Chrome, il bottone per il caricamento dei file appare sempre alla sinistra del testo del campo. Possiamo ovviare a questa situazione solo utilizzando degli stili proprietari per questa famiglia di browser. Vediamo quali.

Abbiamo un semplice campo di tipo file:

<input type="file" id="file" name="file" />​

Ecco gli stili necessari per spostare il bottone di selezione a destra del testo:

input[type="file"]{
    -webkit-appearance: none;
    text-align: left;
    -webkit-rtl-ordering:  left;
}
input[type="file"]::-webkit-file-upload-button{
    -webkit-appearance: none;
    float: right;
    margin: 0 0 0 10px;
    border: 1px solid #aaaaaa;
    border-radius: 4px;
    background-image: -webkit-gradient(linear, left bottom, left top, from(#d2d0d0), to(#f0f0f0));
    background-image: -moz-linear-gradient(90deg, #d2d0d0 0%, #f0f0f0 100%);
}​

Potete visionare l'esempio finale in questa pagina.