style no va en input's file en vista

[kaninox]

Les comento que hago <input type="file" name="archivo" style="width: 350px;">
y no me va en vista, de hecho tengo una clase y no aplica ningun estilo al input file en windows vista..... :/

probado en firefox e IE y lo mismo.....
lo veo en windows XP y todo ok aplica estilos y demas alguien sabe a que se debe esto...

[hades87]

has probado en vez de darle el style así, aplicarlo a una clase/id?

[kaninox]

pues si class id y demas y el file ni cosquillas :/ alguna idea

[kseso?]

Hola Kaninox:
A ver si con suerte este artículo te ayuda algo.
El original (en inglés) aquí

Un saludo

[kaninox]

Esta bonito el ejemplo pero no me muestra que archivo que escojo, me sale el botón y no se sabe que archivo se puso. la verdad yo no quiero algo con tanta parafernalia de código css y demás, solo quiero un formulario en donde los input text los texarea los selects etc..
tengan todos el mismo largo y queden bien cuadraditos, como dije en windows XP todo ok, todos tiene el mismo largo y en el fuckin vista se distorsiona todo :( y por desgracias mi cliente tiene windows vista y me dice pero esta descuadrado todo, la solución aqui no es decirle cámbiese a XP jajaja
pongo una captura por que se me hace raro que en el mismo firefox e IE pero en XP y ubuntu se ve todo igual y parejito pero en VIsta se me ve así....hasta los selects son unos pixeles mas pequeñitos :(
de hecho tuve que instalar vista por muchas cosas, como para comprobar los archivos mime nuevos del office 2007 y cosas como estas :@ estoy que le pongo una patada al tarro jajajajaajaaja

[kaninox]

bueno me he montado un form para que vean que puede pasar el link

http://kazedesign.cl/vista_form.php

si tienen xp podran ver que todo queda parejito mismo largo en cambio en vista se me ve asi haaaaaaggggggrrrrrrrrr......

firefox 3 en windows vista


ojo solo en firefox 3 con windows vista :/ por que lo veo en IE y se ve bien ....

[kseso?]

te he preparado algo por si te sirve. En FF 3 y vi$ta
Mejor si nos dejas algo de código del tuyo
Edito: Mejor ya tomo el código tuyo

Un saludo

[kseso?]

Me está comiendo la moral

Pues lo único con lo que he conseguido aumentar el tamaño del campo (pero también el button y su texto) ha sido creando una clase nueva, para que no afecte al resto de inputs, y aumentando el valor de "font-size:Xem" y propiedades relacionadas con el texto.

Te dejo una captura, FF 3.0.10 en Vi$ta:



Seguiremos.

[kaninox]

a eso me refería por que tal problema :( yo ya le di muchas vueltas y no conseguí nunca nada, ojala tu con mas conocimientos que yo en css me ayudes a resolverlo :P

[josdelaranda]

Hola Kaninox, por medio de css es muy dificil cambiar el ancho de un input file, yo te aconsejaria que lo hagas usando el atributo size del input, sería algo así:

Código:

<input size="10" type="file" id="input1" name="input1" />

Saludos

[kaninox]

pues, yo estaba optando por css ya que ocupando el método size directamente, si pongo 50 por ejemplo en vista ok me toma un largo distinto a que en XP de igual forma se deforma.....

[kseso?]

No tengo claro si es un bug de ff 3.0.1 o por una cuestión de seguridad
Quizás con ff 3.5 (cuando salga se lo colocas a tu cliente ) puedas utilizar las pseudos:
input[type=file]
input[type=file] > input[type=text]
input[type=file] > input[type=button]

Hasta entonces, o le dices a tu jefe y al cliente que eso es lo que hay, de momento, o le haces un "montaje" con lo dicho unos # más arriba.

O utilizar flash, como hacen en algunas páginas (imageShack por ejemplo)

De momento es hasta donde mi cabecita y google han llegado.

Un saludo

[kaninox]

raro pero muchas gracias, entonces a esperar firefox 3.5 :P

saludos

[ssclamp]

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

[kaninox]

gracias ssclamp voy a probarlo y te comento ;)
en todo caso cuento que es solo problema de firefox 3, por que en xp probe con firefox 2 y no pasaba esto...
saludos...

[kaninox]

kseso? salio firefox 3.5 ya lo tengo en mi poder muajajaaja
y ahora se puede dar estilo a los file... pero aun hay cosas que no me gustan como el largo, aun no coinciden con los de firefox 2 :/
y algo que no me agrada es que los nuevos select, los ponen como tipo readonly entonces si tengo un formulario donde subo imagenes y alguien quiere subir algo pero luego se decide por no subir nada, no tiene como quitar del select el archivo a lo menos que le ponga un boton limpiar formulario, pero y que pasa si tenia una noticia bastante grande...

donde uno se puede quejar con firefox y poner este tipo de fallas para ver si los pueden arreglar en otra version o saber por que son así??????
por que si en firefox ahora pongo un file de size="80" no es lo mismo en todos los otros navegadores, toncs es algo que nos sacude a los webmasters, siendo que antes en su version 2 los campos de formulario, todos funcionaban muy bien.... lo digo por los selects tambien, saludos...