[CSS] campi input type file

09-01-2006, 01.15.01

Ciao ragazzi/e vi siente mai imbattuti nel creare un CSS per gestire un campo di tipo file in un form? voi come avete risolto... Io ho un pò di problemi; facendo delle normali assegnazioni tutto ok con IE ma Firefox manda tutto fuori posto... il pulsante 'Sfoglia' va a finirmi al centro del campo dove scrivere e/o copiare il file selezionato dal proprio PC... figuriamoci con gli altri browser...

**poske** · 09-01-2006, 01.33.21

Che tipo di assegnazioni devi dare? posta la parte del css che utilizzi, forse c'è soltanto una piccola aggiunta o modifica da fare...

CIAO! :D

10-01-2006, 00.12.45

Originalmente inviato da poske

Che tipo di assegnazioni devi dare? posta la parte del css che utilizzi, forse c'è soltanto una piccola aggiunta o modifica da fare...

CIAO! :D

Ecco il codice:

Codice:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Prova form upload</title>
<style type="text/css">
.text{
	font: bold 12px Arial, Helvetica, sans-serif;
	color: #000000;
	background: #CCCCCC;
	border: 1px solid #000000;
	padding-right: 5px;
	padding-left: 5px;
	width: 300px;
}	    
</style>
</head>
<body>
<form name="prova" method="post" action="" enctype="multipart/form-data">
<input type="file" class="text" name="aaa"> 
</form>
</body>

</html>

... dove sbaglio? Grazie comunque dell'attenzione... (Provate a vedere il codice con i diversi browser... e i differenti risultati...)

**funcool** · 10-01-2006, 10.36.59

Io non ho capito che risultato vuoi ottenere.

**poske** · 10-01-2006, 12.06.30

per quell'effetto grigio oltre la casella di testo togli "width: 300px;" se ti serve aumentare lo spazio alla destra dopo il bottone aumenta padding-right.

ciao! :D

11-01-2006, 00.09.36

Originalmente inviato da poske

per quell'effetto grigio oltre la casella di testo togli "width: 300px;" se ti serve aumentare lo spazio alla destra dopo il bottone aumenta padding-right.

ciao! :D

Sì, hai ragione togliendo quel 'width' tolgo la striscia grigia. Io però è proprio quello che voglio. Cioè:

-1- avere la lunghezza della casella + pulsante di 300px;
-2- avere l'effetto sul pulsante

Con IE tutto va (??!!??) Con Firefox hai visto cosa succede...

11-01-2006, 01.05.21

IE ha una gestione assurda delle dimensioni dei box...

Probabilmente il tuo problema è proprio questo...

Devi quindi effettuare il solito e consueto "Tantel Celik hack" http://www.tantek.com/CSS/Examples/boxmodelhack.html (di9 solito è per IE5, ma alcuni hanno trovato necessario usarlo per IE6, ossia sfruttare il fatto che le assegnazioni del css vengono sovrascritte se ripetute per fare cosi':

tu vuoi width 300?
allora scrivi

width:XXXpx; // per lo stupido IE: width= 300px + margini + bordi + padding
voice-family: "\"}\""; // queste due righe schermano a IE quello che accade dopo fino alla chiusa parentesi graffa successiva (attento quindi a non aggiungere roba li', perché se no IE non vede)
voice-family:inherit;
width:300px; // per i browser normali e decenti

Se cosi' non funziona, allora si vede se per caso il problema +è un altro

P.S. se hai bisogno effettivamente di specificare i px fai pure. Io personalmente preferisco le percentuali...
Tra l'altro ricordati sempre, se hai esigenza di creare un layout completamente scalabile al resize della finestra, che i normali browser scalano anche i caratteri definiti in px, mentre IE ovviamente è troppo stupido per farlo, per ora.
Tra l'altro, stanno sviluppando IE7, speriamo facciano qualcosa di meglio del 6... Il quale non riconosce nemmeno il application/xhtml... vabbè sto andando OT

12-01-2006, 00.39.37

Grazie pietrovischia, nemmeno col box model hack... Ho visto anche nei siti inglesi e il problema è noto già da tempo... persino il sito dove validare secondo lo standard W3C i css od una pagina HTML se noti ha il bottone così com'è... pazienza... per la lunghezza totale naturalmente ho risolto col semplice 'size' . Grazie a tutti! Potete chiudere il 3d.

Discussione: [CSS] campi input type file

LinkBack

Strumenti discussione

Display

[CSS] campi input type file

Regole di scrittura