Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

<input type="file"> opmaak probleem

3 antwoorden
  • Hallo, ik wil het invul veld en de butten van input type="file" aanpassen met een css. Nu had ik hier een voorbeeld gevonden: http://www.quirksmode.org/dom/inputfile.html Maar ik krijg het niet voor elkaar :evil: Weet iemand wat ik verkeerd heb gedaan? [code:1:967be87cac]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <head> <script type="text/javascript"> var W3CDOM = (document.createElement && document.getElementsByTagName); function initFileUploads() { if (!W3CDOM) return; var fakeFileUpload = document.createElement('div'); fakeFileUpload.className = 'fakefile'; fakeFileUpload.appendChild(document.createElement('input')); var image = document.createElement('img'); image.src='testfoto/album/res/gif.gif'; fakeFileUpload.appendChild(image); var x = document.getElementsByTagName('input'); for (var i=0;i<x.length;i++) { if (x[i].type != 'file') continue; if (x[i].parentNode.className != 'fileinputs') continue; x[i].className = 'file hidden'; var clone = fakeFileUpload.cloneNode(true); x[i].parentNode.appendChild(clone); x[i].relatedElement = clone.getElementsByTagName('input')[0]; x[i].onchange = x[i].onmouseout = function () { this.relatedElement.value = this.value; } } } </script> <style> body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; } #form1 { float: left; font-size: 100%; background-image: url(contact/contact_img/contentback.jpg); background-repeat: no-repeat; height: 510px; width: 500px; background-position: 20px -30px; overflow:hidden; } #form1 .label { color: #fff; float: left; width: 100px; text-align: right; font-size: 80%; } #form1 textarea { height: 100px; width: 200px; margin-bottom: 10px; color: #fff; border: 1px solid #fff; overflow: auto; padding:2px; background-color: #9D8C5E; } #form1 input { width: 200px; color: #fff; border: 1px solid #fff; background-color: #9D8C5E; font-size: 12px; padding: 2px; } #form1 .formrow { clear: both; padding-top: 10px; width: 400px; } #form1 .formrow .input { width: 160px; float: left; margin-left: 10px; } #form1 .formrow input { } #form1 .button { background-image: url(img_home/menubackbr.gif); background-repeat: repeat-x; width:70px; border:1px solid #fff; float:left; margin-left:100px; } #form1 h1 { font-size:135%; margin-top: 20px; margin-bottom: 4px; font-weight: normal; color:#fff; font-family: Verdana, Arial, Helvetica, sans-serif; } div.fileinputs { position: relative; } div.fakefile { position: absolute; top: 0px; left: 110px; z-index: 1; height: 23px; } input.file { position: relative; text-align: right; -moz-opacity:0 ; filter:alpha(opacity: 0); opacity: 0; z-index: 2; } input.file1 { text-align: right; -moz-opacity:0 ; filter:alpha(opacity: 0); opacity: 0; z-index: 1; width: 400px; padding-top: 10px; background-image: url(testfoto/album/res/gif.gif); position: relative; } </style> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Contact</title> </head> <body bgcolor="#3B6D21"> <form id="form1" name="form1" enctype="multipart/form-data" method="post" action="" onSubmit=""> <h1>Contact</h1> <br /> <div class="formrow"><span class="label">Naam:</span><span class="input"> <input type="text" name="naam" SIZE="25" maxlength="25" tabindex="1" /></span></div> <div class="formrow"><span class="label">E-mail:</span><span class="input"> <input type="text" name="email" SIZE="25" maxlength="40" tabindex="2" /></span></div> <div class="formrow"><span class="label">Upload:</span><span class="input"> <input type="file" name="upload" SIZE="36.5" maxlength="40" tabindex="2" /></span> <div class="fileinputs"> <div class="fakefile"> <input /> <input name="file" type="file" class="file11" /> <img src="testfoto/album/res/gif.gif" /> </div> </div> <div class="formrow"><span class="label">Bericht:</span> <span class="input"><textarea name="bericht"></textarea></span> <span class="input"><input type="submit" value="Verzend" class="button"></span></div> <input type="hidden" name="recipients" value="info27FTJG5erwinsedelpapegaaien.nl" /> </form> </body> </html>[/code:1:967be87cac]
  • "ik krijg het niet voor elkaar".... Wát krijg je niet voor elkaar? Waar loop je vast? URL?
  • Het lukt me niet om de "bladeren" butten op de goeie plek te krijgen deze zit nu halverwege achter het invul veld van bericht. en het gif plaatje dat zou dan de nieuwe "bladeren" butten moeten worden maar deze kan ik helemaal niet positioneren. Ik ben al gaan schijven met de div's maar krijg het niet goed. Het enige dat gelukt is, is het invul veldje van upload te veranderen. Maar dat was ook alleen het vakje er op plaatsen :-? http://www.erwinsedelpapegaaien.nl/contactform_filecss.html

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.