stilizzare campo input type file

netmaster

Nuovo Utente
8 Dic 2008
14
0
1
Salve a tutti. Sto cercando di personalizzare il campo INPUT type="file" con una soluzione CSS cross-browser compatibile. Questa soluzione, tuttavia, mi crea due problemi:
- mi disattiva il FOCUS nel campo text
- il bottone che rimuove il file eventualmente selezionato per errore non funziona.

Di sotto riporto il codice di tutta la pagina (ridotto all'essenziale per ridurre lo spazio)dove ho inserito due FORM: uno senza stilizzazione (funzionate) e uno stilizzato (che mi crea questi problemi).

Presumo che ci sia incompatibilità fra le varie posizioni assolute e relative impostate nel CSS, ma non riesco a venirne a capo.

Qualcuno mi può aiutare, per favore? Grazie! (E' consigliabile testare i FORM uno alla volta)

Codice:
<html>
<head>

<!-- FOCUS NEL CAMPO INPUT -->
<script language="JavaScript" type="text/javascript">
function initOverLabels () {  
if (!document.getElementById) return;         
var labels, id, field;   
// Set focus and blur handlers to hide and show   
// labels with 'overlabel' class names.  
labels = document.getElementsByTagName('label');  
for (var i = 0; i < labels.length; i++) {     
if (labels[i].className == 'overlabel') {       
// Skip labels that do not have a named association      
// with another field.      
id = labels[i].htmlFor || labels[i].getAttribute ('for');      
if (!id || !(field = document.getElementById(id))) {        
continue;      
}        

// Change the applied class to hover the label       
// over the form field.      
labels[i].className = 'overlabel-apply';       
// Hide any fields having an initial value.      
if (field.value !== '') {        
hideLabel(field.getAttribute('id'), true); 
}       

// Set handlers to show and hide labels.      
field.onfocus = function () {        
hideLabel(this.getAttribute('id'), true);      
};      

field.onblur = function () {        
if (this.value === '') {          
hideLabel(this.getAttribute('id'), false);        
}      
};       

// Handle clicks to label elements (for Safari).      
labels[i].onclick = function () {        
var id, field;        
id = this.getAttribute('for');        
if (id && (field = document.getElementById(id))) {          
field.focus();        
}      
};     

}  
}
}; 

function hideLabel (field_id, hide) {  
var field_for;  
var labels = document.getElementsByTagName('label');  
for (var i = 0; i < labels.length; i++) {    
field_for = labels[i].htmlFor || labels[i]. getAttribute('for');    
if (field_for == field_id) {      
labels[i].style.textIndent = (hide) ? '-2000px' : '0px';      
return true;    
}  
}
} 

window.onload = function () {  
setTimeout(initOverLabels, 50);
};
</script>

<!-- HIGHLIGHT CAMPO INPUT -->
<script language="JavaScript1.2" type="text/javascript">
//Highlight form element- © Dynamic Drive (www.dynamicdrive.com)

//For full source code, 100's more DHTML scripts, and TOS,

//visit http://www.dynamicdrive.com

var highlightcolor="#ccc"

var ns6=document.getElementById&&!document.all

var previous=''

var eventobj



//Regular expression to highlight only form elements

var intended=/INPUT|TEXTAREA|SELECT|OPTION/



//Function to check whether element clicked is form element

function checkel(which){

if (which.style&&intended.test(which.tagName)){

if (ns6&&eventobj.nodeType==3)

eventobj=eventobj.parentNode.parentNode

return true

}

else

return false

}



//Function to highlight form element

function highlight(e){

eventobj=ns6? e.target : event.srcElement

if (previous!=''){

if (checkel(previous))

previous.style.backgroundColor=''

previous=eventobj

if (checkel(eventobj))

eventobj.style.backgroundColor=highlightcolor

}

else{

if (checkel(eventobj))

eventobj.style.backgroundColor=highlightcolor

previous=eventobj

}

}
</script>

<style type="text/css">

body {
 font:70% verdana;
}

form {
  margin:0px;
  padding:0px;
}

label.overlabel {  
  position:absolute;  
  top:5px;  
  left:5px;  
  z-index:1;  
  color:#333;
}

label.overlabel-apply {    
  position:absolute;    
  top:5px;    
  left:5px;    
  z-index:1;    
  color:#333; 
  font-weight:bold;
}


.button {
  font-weight:bold;
  color:#333;
  background:#eee;
  border:1px solid #333;
  text-align: center;
  cursor:pointer; 
}

#sfoglia {
  margin-bottom:0.5em;
  text-align:left;
  font-weight:bold;
  color:#333 !important; 
  position:relative;
}

#stringa-nascosta {
  position: absolute;
  top: 0px; 
  left: 0px;
  width:290px ! important;
  opacity:0;
  -moz-opacity:0;
  filter:alpha(opacity:0);
  -ms-filter: "alpha(opacity=0)";
  -khtml-opacity:0;
  padding:2px;
  z-index: 2;
}

.stringa-visibile {
  width:210px; height:22px;
  border:1px solid #333; 
  color:#333;
  letter-spacing:normal;
  word-spacing:normal;
  background:#eee;
  padding:2px;
  position: relative;
  top: 0px;
  left: 0px; 
}

.stringa-upload {
  width:294px;
  border:1px solid #333; 
  color:#333;
  letter-spacing:normal;
  word-spacing:normal;
  background:#eee;
  padding:2px;
}

#blocco {
  overflow:hidden; 
  position:relative;
}

#seleziona {
  position: relative;
  top: 0px;
  left: 0px; 
  width:75px;  
}

#rimuovi {
  position: relative;
  top: 0px;
  left: 0px;
  width:75px;  
}

</style>

</head>
<body>

<!-- CODICE PER DESELEZIONARE FILE INSERITI PER ERRORE -->
<script language="javascript">
function clearFileInputField(tagId) {
    document.getElementById(tagId).innerHTML = 
                    document.getElementById(tagId).innerHTML;
}
</script>

<!-- FORM STILIZZATO NON FUNZIONATE -->
<form method="post" action="#" enctype="multipart/form-data" onKeyUp="highlight(event)" onClick="highlight(event)">
<div id="sfoglia">
<input type="file" id="stringa-nascosta" onchange="javascript: document.getElementById('file').value = this.value" size="35" />
<div id="blocco">
<label for="file" class="overlabel">seleziona foto</label>
<input type="text" id="file" class="stringa-visibile" name="file" onkeydown="return false;" tabindex="1" />
<input type="button" id="seleziona" class="button" value="seleziona" />
<input type="button" id="rimuovi" class="button" value="rimuovi" onclick="clearFileInputField('blocco')" />
</div>
</div>
</form>

<br><br><br>

<!-- FORM NON STILIZZATO FUNZIONATE -->
<form method="post" action="#" enctype="multipart/form-data" onKeyUp="highlight(event)" onClick="highlight(event)">
<div id="sfoglia">
<div id="blocco">
<label for="file" class="overlabel">seleziona foto</label>
<input onkeydown="return false;" class="stringa-upload" type="file" name="file" id="file" tabindex="1" size="32" />
<input type="button" class="button" value="rimuovi" onclick="clearFileInputField('blocco')" />
</div>
</div>
</form>

</body>
</html>
 
Discussioni simili
Autore Titolo Forum Risposte Data
M stilizzare il campo input file jQuery 1
novello88 DIV style - stilizzare un div contenitore HTML e CSS 2
SolidSnake4 stilizzare cursore mouse per sito web HTML e CSS 2
borgo italia stilizzare una fotogallery con i css HTML e CSS 7
SolidSnake4 stilizzare un pulsante tipo input type con css HTML e CSS 10
D Visualizzazione pagina basata sul valore di un campo del database PHP 2
A pulsante di update campo mysql con javascript Javascript 2
M Creare un campo input select quantità di un numero intero prelevato dal db PHP 3
D riempire campo inserendo un valore in un altro campo PHP 2
S riflettere valore di campo input range in live Javascript 0
P Ricerca campo data PHP 1
M Aggiornare stesso campo in due tabelle PHP 0
U Campo vuoto data errore Fatal error: PHP 2
Alex_70 Aggiornare campo da un altro campo PHP 16
F Steps campo input field Javascript 1
N Chiave Primaria in Campo Calcolato Windows e Software 1
I Focus su un campo Javascript 9
Alex_70 Nascondere label tab se campo vuoto PHP 2
G Impostare suggerimenti campo text di un form Javascript 2
Shyson Inserire placeholder nel campo cerca PHP 5
B Campo ricerca domini HTML e CSS 4
D verifica codice fiscale persona fisica /aziendale stesso campo HTML e CSS 1
G Campo Not null a condizione MySQL 8
M [PHP] Compilare automaticamente il campo data PHP 5
M [PHP] Problemi di salvataggio su campo calcolato PHP 0
M [PHP] Salvare campo di una tabella in una variabile PHP 14
M [MySQL] CREARE UN LINK SU UN DETERMINATO CAMPO DI UNA TABELLA RISULTATO DI UNA QUERY SQL MySQL 3
D [ASP] Leggere Campo decimal MYSQL Classic ASP 1
S [ASP] SALVARE VALORE SELECT OPTION SU CAMPO TABELLA ACCESS Classic ASP 9
M [PHP] Drop down in campo select PHP 1
elpirata [RISOLTO][Javascript] Datapicker e autocompletamento campo input Javascript 2
elpirata [RISOLTO][Mysql] Contare le occorrenze in un campo tipo varchar MySQL 2
elpirata [MYSQL] Schedulare evento per update del campo data su tabella MySQL 0
G Campo HTML input file con jQuery jQuery 0
D [MS Access] problemi con inserimento campo in una maschera MS Access 6
Arcadia [MS Access] Focus su campo specifico MS Access 1
A [MS Access] Pulsante per inserire allegati in campo maschera MS Access 0
L [Javascript] Drag and drop. Aggiornamento Campo Javascript 2
A [MySQL] Ottenere più risultati in un unico campo MySQL 7
A [MS Access] Somma Campi se in altro campo presente un determinato testo MS Access 1
Monital [PHP]Far riconoscere stringa o numerico epr creazione campo tabella PHP 6
Monital Funzione php e campo database come variabile PHP 6
C [PHP] Creare un Pulsante che ricopia valori di un campo in altro record PHP 4
G [Javascript] Campo a comparsa di select Javascript 0
A [Javascript] Somma di un campo in una tabella dinamica Javascript 0
L [PHP] case then e campo non riconosciuto PHP 0
A [PHP] Modificare campo database in base alla scelta dell'utente PHP 2
C [PHP] Estrapolare solo l'anno da una data di nascita inserita in un campo PHP 8
Store creazione campo search in php PHP 1
A [MySQL] riordinare campo criptato MySQL 1

Discussioni simili