Archief - HTML/CSS: Formulier opmaken

horse_99 · 4 mei 2005

Juuuuuu, de webdesigners

Ik heb is een vraag i.v.m. formulieren opmaken. In verschillende browsers zien sommige input types er totaal anders uit. input type="text, password, submit" kun je allemaal redelijk hetzelfde maken, afgezien van de margins van deze tag in sommige browsers.

Het grootste probleem is echter input type="radio, checkbox" en select. Deze 3 types zien er in verschillende browsers wel erg verschillend uit. Als je dan nog is de weergave van Windows XP op klassiek of Windows XP instelt, zien deze er nog eens anders uit.

Bestaat er een truukje om deze types in iedere browser hetzelfde te krijgen?

Bedankt voor alle reacties!!! :bow:

servi · 5 mei 2005

door gebruik te maken van afbeeldingen.

Hetgeen je dan doet is die checkboxes, select en radioknoppen in een verborgen <div> steken.

Door middel van javascript controleer dan je of mensen op die image klikken ja of nee.

een voorbeeldje voor checkbox :

de checkbox die niet zichtbaar is
<div style="visibility : hidden">
<input type="checkbox" id="ECHTECHECKBOX" />
</div>

de checkbox die de gebruiker zit
<img id="checkboxafbeelding" onclick="verander_checkbox()" src="niet_geselecteerde_checkbox.gif" alt="checkbox" />

de controle die je dan doet :
<script type="javascript/text">
function verander_checkbox() {
if ( ! document.getElementById('ECHTECHECKBOX').checked) {
// pas afbeelding aan naar nieuwe status
document.getElementById('checkboxafbeelding').src = "geselecteerde_checkbox.gif";
// pas de echte checkbox aan
document.getElementById('ECHTECHECKBOX').checked = true;
} else {
document.getElementById('checkboxafbeelding').src = "niet_geselecteerde_checkbox.gif";
document.getElementById('ECHTECHECKBOX').checked = false;
}

}

</script>

horse_99 · 5 mei 2005

servi zei:
door gebruik te maken van afbeeldingen.

Hetgeen je dan doet is die checkboxes, select en radioknoppen in een verborgen <div> steken.

Door middel van javascript controleer dan je of mensen op die image klikken ja of nee.

een voorbeeldje voor checkbox :

de checkbox die niet zichtbaar is
<div style="visibility : hidden">
<input type="checkbox" id="ECHTECHECKBOX" />
</div>

de checkbox die de gebruiker zit
<img id="checkboxafbeelding" onclick="verander_checkbox()" src="niet_geselecteerde_checkbox.gif" alt="checkbox" />

de controle die je dan doet :
<script type="javascript/text">
function verander_checkbox() {
if ( ! document.getElementById('ECHTECHECKBOX').checked) {
// pas afbeelding aan naar nieuwe status
document.getElementById('checkboxafbeelding').src = "geselecteerde_checkbox.gif";
// pas de echte checkbox aan
document.getElementById('ECHTECHECKBOX').checked = true;
} else {
document.getElementById('checkboxafbeelding').src = "niet_geselecteerde_checkbox.gif";
document.getElementById('ECHTECHECKBOX').checked = false;
}

}

</script>

Oh ideaal

. Nuja van Javascript ken ik de nougabollen, toch wel de moeite om eens te bekijken precies.

Bedankt voor je reactie! :applause:

Archief - HTML/CSS: Formulier opmaken

horse_99

Legacy Member

servi

Legacy Member

horse_99

Legacy Member