Es un problema "casi" irresoluble para firefox (2 y 3): no hay forma de que adopte estilo para ese campo.
Este ajuste, no terminado del todo, permite tener una apariencia casi idéntica en ie6, ie7, ie8, ff3 y opera9.64 y opera10beta... pero no ajusta en ff2.
Probado en Xp y Vista.
Quizás te sirva, ajustándolo a tu diseño y medidas, para salir del paso.
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Compatibilidad de Formularios</title>
<meta http-equiv="content-language" content="es" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="robots" content="index,follow" />
<meta name="description" content="Probando Formularios Compatibles." />
<meta name="rating" content="general" />
<meta name="copyright" content="Copyright © 2009" />
<meta name="author" content="KaZe Design" />
<style type="text/css">
body {
overflow: visible;
background:#000000;
margin:0;
padding:0;
}
input:hover, textarea:hover, select:hover, checkbox:hover {
border: #3399CC 1px solid;
}
#centrador {
width: 510px;
margin: 0 auto;
/*border: 1px solid #484848; /*sólo para pruebas de montaje*/
padding: 8px;
}
#caja_form {
position: relative;
width: 500px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #ccc;
/*border: 1px solid #484848; /*sólo para pruebas de montaje*/
}
.caja1 {
font-family: Verdana;
font-size: 10px;
color: #999999;
background-color: #000000;
border: 1px solid #666;
text-decoration: none;
width: 400px;
overflow: hidden;
}
.caja2 {
font-family: Verdana;
font-size: 10px;
color: #999999;
background-color: #000000;
border: 1px solid #666;
text-decoration: none;
width: 403px;
}
p {
text-align: left;
width: 500px;
line-height: 18px;
}
.derecha {
position: absolute;
width: 420px;
right: 10px;
}
</style>
</head>
<body>
<br /><br />
<div id="centrador">
<div id="caja_form">
<p>Entrada : <span class="derecha"><input type="text" class="caja1" name="numero1" /></span></p>
<p>Entrada : <span class="derecha"><input type="file" class="caja2" name="numero2" size="77" /></span></p>
<p>Entrada : <span class="derecha"><select name="numero3" class="caja2"><option value="Probando">Probando el largo en vista de un Combo</option></select></span></p>
<p>Entrada : <span class="derecha"><textarea class="caja1" name="numero4" rows="5"></textarea></span></p>
</div>
</div>
</body>
</html> Saludos