Skip to content
card background pattern
Level 1

Modern CSS Design Systems

Unlock Full Course

$49.99 $29.99

Or

$24.99/Month

Forms and Inputs

Here we will take a deeper look into inputs and how we can style these without classes.

Downloads

Comments

User photo avatar
Raul
Admin
3 months ago

@Taeluf The relationship between that input field and the label is declared correctly in both examples so it's just down to whatever way you prefer to do it really 🙂

User photo avatar
Taeluf
updated 3 months ago

Why do you wrap the form inputs in divs? And why use <label for=> & <input id=> instead of <label> <input> </label> ? I'm doing:

<label>Text
<input type="text" name="whatever">
</label>

and styling with label input { display:block; }

Gary Porter
updated 3 months ago

If anyone wants to add radio buttons and checkboxes, you will need to add the following CSS, if you do the labels as block for everything else

[type="checkbox"] + label, [type="radio"] + label { display: inline-flex; }

Something to say?

Become a Pro