stilizzare campo input type file

netmaster · 18 Nov 2010

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>

gleenk · 23 Lug 2011

Stilizzare campi input file con jQuery

Ciao! è possibile stilizzare i campi input type="file" utilizzando jQuery ed ottenendo una soluzione cross-browser come chiedi, IE6 incluso.
Ti rimando a questo tutorial per vedere come fare ad utilizzare il plugin in questione:
Come stilizzare campi di input con jQuery
Buona lettura!

Cerca

Cerca

stilizzare campo input type file

netmaster

Nuovo Utente

gleenk

Nuovo Utente

Discussioni simili