Submit It looks like the Submit button isn’t clickable for some reason.
Textarea I can’t make the textarea bigger in height. If I add a height in px it will vertical-align the placeholder to the center instead of top left. Should I use “position: absolute” for the placeholder otherwise?
Positioning I sure didn’t really understood the positioning in CSS. I created 6 divs with an id #block-1 #block-2, #block-3... and put random values for top but I’m pretty sure it’s not the right way to go. It looks fine as it is but there must be a way to do something clean.
Adding margins to the top and bottom of each div wasn’t conclusive.
Checkboxes I tried to have two columns of checkboxes so you wouldn’t have to scroll to see every option but nothing worked. I tried flex and float.
Maybe I didn’t do it right, or maybe the width of the labels were messing with flex?
If someone could give me an idea that would be really cool.
Ideally, when you resize the window, the checkboxes should align to the left in one column if the window is too narrow.
Radiobuttons for At home/At the restaurant : I tried “display: inline-block” to have them on the same line and I even tried float but nothing worked.
Select Option Is it possible to add icons to the left of the option labels?
If you see any other mistakes or things I could improve, please let me know!
I’m sure I can improve the CSS syntax to avoid repetition or to improve readability (I tend to place the selectors a bit randomly…).
Love that you’ve made this challenge your own! I know custom-styled checkboxes and radio buttons aren’t always easy to make.
A submit button submits its parent form. Your submit button lies outside the form, so it submits nothing.
There’s at least 1 thing you definitely should do to improve readability, and that’s fix your name/age/email inputs at the top and the text field at the bottom. The placeholder text is are almost completely invisible.
There are 2 things to fix here:
Fix the labels so that they actually label the content, and then make them a readable color. Also, place them before the respective element, rather than after — this is the convention for text inputs.
Either remove the placeholders or increase the color contrast. If you do keep them, consider using them to show extra info, such as expected formats (e.g. email@example.com) rather than simple descriptors (e.g. Your email), as the latter are already provided by the label.
I can’t believe I completely missed to put the submit button inside the form
As for the labels, I was trying to give the inputs this special effect where you click and the placeholder disappears without having visible labels.
If I could manage to achieve the same effect with the label above the line… maybe with absolute positioning?
You can achieve a similar effect without ruining UX using the floating label approach, explained in the same article. Here’s a CodePen demo that achieves this effect with only HTML and CSS.
Note that in the demo, the label element HTML comes after the input HTML, but is displayed above it, so user expectations aren’t broken. In the case of inputs and labels, the semantic link comes from the for/id attributes, not the placement of the markup itself.
EDIT: The markup of the demo actually has a few issues (ids must be unique and are case sensitive, and the nesting isn’t quite right), but hopefully displays the effect nicely nonetheless.