Buenas!
He puesto el código tal y como me has comentado... y no me ha cambiado nada. En IE se veía el input más pequeño, pero en Firefox exactamente igual. ¿Puede ser que lo haya puesto mal?
Código HTML:
Ver original<script type="text/javascript"> if (!window.SI) { var SI = {}; };
SI.Files =
{
htmlClass : 'SI-FILES-STYLIZED',
fileClass : 'file',
wrapClass : 'cabinet',
wrapClass2 : 'cabinet2',
fini : false,
able : false,
init : function()
{
this.fini = true;
var ie = 0 //@cc_on + @_jscript_version
if (window.opera || (ie && ie < 5.5) || !document.getElementsByTagName) { return; } // no support for opacity or the DOM
this.able = true;
var html = document.getElementsByTagName('html')[0];
html.className += (html.className != '' ? ' ' : '') + this.htmlClass;
},
stylize : function(elem)
{
if (!this.fini) { this.init(); };
if (!this.able) { return; };
elem.parentNode.file = elem;
elem.parentNode.onmousemove = function(e)
{
if (typeof e == 'undefined') e = window.event;
if (typeof e.pageY == 'undefined' && typeof e.clientX == 'number' && document.documentElement)
{
e.pageX = e.clientX + document.documentElement.scrollLeft;
e.pageY = e.clientY + document.documentElement.scrollTop;
};
var ox = oy = 0;
var elem = this;
if (elem.offsetParent)
{
ox = elem.offsetLeft;
oy = elem.offsetTop;
while (elem = elem.offsetParent)
{
ox += elem.offsetLeft;
oy += elem.offsetTop;
};
};
var x = e.pageX - ox;
var y = e.pageY - oy;
var w = this.file.offsetWidth;
var h = this.file.offsetHeight;
this.file.style.top = y - (h / 2) + 'px';
this.file.style.left = x - (w - 30) + 'px';
};
},
stylizeById : function(id)
{
this.stylize(document.getElementById(id));
},
stylizeAll : function()
{
if (!this.fini) { this.init(); };
if (!this.able) { return; };
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++)
{
var input = inputs[i];
if (input.type == 'file' && input.className.indexOf(this.fileClass) != -1 && input.parentNode.className.indexOf(this.wrapClass) != -1)
{
this.stylize(input);
};
if (input.type == 'file' && input.className.indexOf(this.fileClass) != -1 && input.parentNode.className.indexOf(this.wrapClass2) != -1)
{
this.stylize(input);
};
};
}
};
<form id="frmPicture" name="frmChangePicture" action="" method="post" enctype="multipart/form-data"> <input type="hidden" name="Change" value="1"> <label class="cabinet" style="background: url(img/site_new/btn-change-photo.png) 0 0 no-repeat;"> <input type="file" id="filein" class="file" style="width:115px; cursor: pointer;" name="per-image" onchange="document.getElementById('frmPicture').submit();" />