Ciao,
sono programmatore Java e di CSS e HTML non sono esperto. Ho voluto creare un <input type="file" /> modificato e ho scritto il seguente:

codice:
<form action="upcv" method="post" enctype="multipart/form-data">
	<div style="padding-left: 2px;">
		<div class="file-wrapper"> <input type="file"	name="file" id="photo" />
			<span class="button">Sfoglia</span>
		</div>
	</div>
	<div style="padding-top: 10px;">
		<input type="hidden" value="${consulente.id }" name="id" />
		<input type="submit" value="Salva" disabled="disabled"  id="cons_up_cv_submit"/>
	</div>
</form>
e il mio CSS:


codice:
.file-wrapper {
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  position: relative;
}

.file-wrapper .button {
  background-image: url("images/button_bg_1.gif");
  background-repeat: no-repeat;
  cursor: pointer;
  display: inline-block;
  font-size: 11px;
  font-weight: bold;
  padding: 4px 18px;
  text-transform: uppercase;
}

.file-wrapper input {
  cursor: pointer;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
}

.file-wrapper input {
  filter: alpha(opacity=1);
  -moz-opacity: 0.01;
  opacity: 0.01;
}
.file-wrapper input {
  font-size: 100px;
}

.file-holder {
	padding-left: 10px;
}
Qualcuno mi sa dire perchè ho questa differenza tra Firefox e Chrome?

Notare il campo, quello sopra è chrome ed è OK. Quello sotto è FireFox ed è tagliato.