css verschil tussen checkbox en text input
<fieldset>
<legend>
<label>
Dit lukt opzich goed.
Maar nu ik meerdere checkboxes toevoeg. Komen deze niet meer netjes onder elkaar te staan.
Wat is het verschil tussen een textbox en een checkbox netjes te stijlen?
http://roozeboom.service-4u.nl/?page=caravan_add
Hier kun je kijken voor een voorbeeld.
(In IE staat de textarea ook niet goed. Maar dit is een later punt)
PS, je CSS kan een stuk overzichtelijker en makkelijker te onderhouden worden als je het een beetje gaat groeperen.
Ik weet dat css beter en makkelijker kan.
Maar css is voor mij nogal lastig. Kan er niet echt mee overweg.
Maar ben er wel druk mee bezig om het te verbeteren.
Wanneer ik alles heb zoals ik het wil hebben. Dan wou ik me gaan verdiepen om de css netter te maken.
Maar waarom reageert de <input type="checkbox" /> anders dan <input type="text" />
Dit zou toch hetzelfde moeten zijn?
Waarom ze anders reageren zou ik ook niet zo weten. Sowieso vind ik het raar (lees: lelijk) als je zo'n brede width aan de checkbox meegeeft.
Ik heb even snel wat geprobeerd met lijsten, succes!
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<form action="?page=caravan_form_handle" method="post">
<fieldset class="short"><legend>Voeg een caravan Toe</legend>
<ul>
<li>
<label class="short" for="merk">merk</label>
<input type="text" id="merk" name="merk" class="short" value="" />
</li>
<li>
<label class="short" for="type">type</label>
<input type="text" id="type" name="type" class="short" value="" />
</li>
<li>
<label class="short" for="kleur">kleur</label>
<input type="text" id="kleur" name="kleur" class="short" value="" />
</li>
<li>
<label class="short" for="brandstof">Brandstof</label>
<select class="short" id="brandstof" name="brandstof">
<option value="diesel">diesel</option>
<option value="gas">gas</option>
<option value="benzine">benzine</option>
</select>
</li>
<li>
<label class="short" for="transmissie">Transmissie</label>
<select class="short" id="transmissie" name="transmissie">
<option value="hangeschakeld">hangeschakeld</option>
<option value="automaat">automaat</option>
</select>
</li>
<li>
<label class="short" for="voortent">voortent</label>
<input type="checkbox" id="voortent" name="voortent" class="short" />
</li>
<li>
<label class="short" for="afstap">afstap</label>
<input type="checkbox" id="afstap" name="afstap" class="short" />
</li>
<li>
<fieldset class="nood">
<textarea class="short" name="omschrijving" rows="" cols=""></textarea>
</fieldset>
</li>
<li><input class="button" type="submit" value="verzend" /></li>
</ul>
</fieldset>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<form action="?page=caravan_form_handle" method="post">
<fieldset class="short"><legend>Voeg een caravan Toe</legend>
<ul>
<li>
<label class="short" for="merk">merk</label>
<input type="text" id="merk" name="merk" class="short" value="" />
</li>
<li>
<label class="short" for="type">type</label>
<input type="text" id="type" name="type" class="short" value="" />
</li>
<li>
<label class="short" for="kleur">kleur</label>
<input type="text" id="kleur" name="kleur" class="short" value="" />
</li>
<li>
<label class="short" for="brandstof">Brandstof</label>
<select class="short" id="brandstof" name="brandstof">
<option value="diesel">diesel</option>
<option value="gas">gas</option>
<option value="benzine">benzine</option>
</select>
</li>
<li>
<label class="short" for="transmissie">Transmissie</label>
<select class="short" id="transmissie" name="transmissie">
<option value="hangeschakeld">hangeschakeld</option>
<option value="automaat">automaat</option>
</select>
</li>
<li>
<label class="short" for="voortent">voortent</label>
<input type="checkbox" id="voortent" name="voortent" class="short" />
</li>
<li>
<label class="short" for="afstap">afstap</label>
<input type="checkbox" id="afstap" name="afstap" class="short" />
</li>
<li>
<fieldset class="nood">
<textarea class="short" name="omschrijving" rows="" cols=""></textarea>
</fieldset>
</li>
<li><input class="button" type="submit" value="verzend" /></li>
</ul>
</fieldset>
</form>
</body>
</html>
Gewijzigd op 01/01/1970 01:00:00 door Mark PHP
GeWa schreef op 18.04.2009 13:29:
Tuurlijk!Dit zou toch hetzelfde moeten zijn?
Net zoals dat Internet explorer goed hoort te werken! (Niet dus.)
Forms stylen is gewoon nogal ingewikkeld, je kan het beste al je soorten inputs classes mee geven en ze afzonderlijk stylen, krijg je een beter resultaat van dan ze allemaal te proberen te stylen met alleen input {}.
Verder raad ik het net zoals al eerder is gezegd een unordered list te gebruiken om je form te maken inplaats van divs of tables. Het is iets moeilijker, maarja uiteindelijk een beter resultaat.
Zoek ook even op Google naar CSS tutorials van het stylen van forms.
Als je gewoon de label hebt om te stylen en de input.
Ik heb al eerder met dit probleem gezeten. Toen gewoon een extra class aangemaakt om het wel goed te krijgen.
Maar ik kan gewoon niet begrijpen. Waarom een checkbox anders reageert dan een text.
Wat betreft de breedte die lelijk wordt. In IE is dit idd zo. In FF niet.
Hiervoor zijn ook oplossingen heb ik ergens gelezen die in css te doen zijn.
Ik ga me ook eens verdiepen in die lijsten.
Maar blijf het een vreemde manier vinden.
maar misschien werkt het idd makkelijker.
Dat ga ik dus nog eens even ondervinden.
in ieder geval bedankt voor jullie reacties.