Styling webpages? Easy.
I’m guessing a lot of you had to work with CSS at some point in their lives.
Most parts of the web are fairly easy to style,
especially if you know some of the little hacks that you have to use to make a page look pretty.

So you go ahead and style everything the way you want it:
Nice grey background, elements in different shades of blue a bunch of elements in pink for contrast.
You put a nice image as a header for your page and add a sidebar, things that appear and disappear when you hover over them, even some nice animations.
All looking good.

Styling forms? Not so much.
Then you get to the user settings.
You try to apply styles to the checkboxes. Nothing happens.
You try to apply styles to the dropdowns of select elements. Nothing happens.
Need a date selector? Good luck on doing anything to that one!

But why is it so hard to style webforms?

In the end it all comes down to the fact that styling form elements is left up to the browsers.

A select will look different in Chrome than in Safari, Firefox, IE or any other User Agent.
But then again, in a Chrome browser a select will look the same in every web page you look at.

I’m not talking about whether you should or shouldn’t overwrite those defaults.
There are a lot of arguments for and against it, but all I’m going to focus on in this post is the how.


How do you restyle checkboxes?
Especially hacky is how the restyled checkboxes work:
The actual checkbox input is to be hidden:


input[type="checkbox"] {
position: absolute; // take it out of document flow
opacity: 0; // hide it
}

The new box for the checkbox is then built into the label of the checkbox with the ::before selector.
The tick is then styled with the ::after selector like this:


input[type="checkbox"] + label:before {
// Box for Checkbox
}


input[type="checkbox"] + label {
// Actual label
}


input[type="checkbox"]:checked + label:after {
// Tick
}

That way you can have a completely customised checkbox.

How does it look like all put together?
I had a little project where I spent a week researching how to make a webform pretty with only CSS.
The result was a melange of tips and tricks I found all over the web. (That little checkbox trick that i just explained was one of them)

Check it out below!

See the Pen Formstyles for Blogpost by Feu (@the_Feu) on CodePen.

Jennifer Mourek

Autor: Jennifer Mourek

Jennifer (von eigentlich jedem nur "Feu" genannt) verbrachte ihre Kindheit im schönen Steigerwald und kämpfte sich bis zum Abitur durch die Schule. Seit September 2016 unterstützt sie nun im Rahmen ihrer Ausbildung zum Fachinformatiker die Development Abteilung bei Netways und widmet sich dort dem Web Development. Ihre Freizeit verbringt sie hauptsächlich in den virtuellen Welten von 'Dota 2' und diversen anderen Games, an der Kletterwand in der Boulderhalle oder damit ihren Freunden und Kollegen auf die Nerven zu gehen.