"browse" Button in einem file upload Element stylen

[Nico2]

Hi,

Der Upload-Button lässt sich aus versch. Gründen nicht stark verändern. Mestens wird getrickst etwa bekommt der Button opacity:0.01 und wird mit position:absolute über einen eigenen Button gelegt.

.upload-container {  
  position: relative;  
  display: inline-block;  
  padding: 15px 35px;  
  border-radius: 4px;  
  color: white;  
  background-color: #28699d;  
}  
.upload-field {  
  position: absolute;  
  left: 0;  
  top: 0;  
  width: 100%;  
  height: 100%;  
  opacity: 0.2; /* Höher als nötig zur Erklärung */  
}

<div class="upload-container">  
    Datei hochladen  
    <input type="file" class="upload-field">  
</div>

Oder mit JavaScript wird der Klick auf einen Button an den Input weitergegeben.

<p>  
    <button class="upload-buttno">Datei hochladen</button>  
    <input type="file" class="upload-field">  
</p>

<script>  
[code lang=javascript]document.querySelector('.upload-buttno').addEventListener('click', function() {  
  document.querySelector('.upload-field').click();  
});

</script>[/code]

Dann sollte der Datei Auswahl Dialog aufgehen.

Wenn das nicht unbedingt nötig ist, würde ich mir nich die Mühe machen zumal man die Tricks in allen Browsern testen muß. Der normale Upload Button erfüllt seinen Zweck oder?

Nico