Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

<input type="file"> opmaak probleem

None
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
    es/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
    es/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
    es/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

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