Skip to main content

Modern Form Styling — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the Modern Form Styling lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.

Sign in to start solvingCreate a free account

Exercises(5)

  1. 1

    Tint the checkbox

    easy10 min

    Give #check a red accent colour.

  2. 2

    Strip the native look

    easy10 min

    Remove the built-in styling from #input.

  3. 3

    Size a field to its content

    easy10 min

    Let #input grow with what is typed.

  4. 4

    Colour the caret

    easy10 min

    Make the caret in #area navy.

  5. 5

    Theme a control set

    medium10 min

    Red accent on the checkbox, rounded and padded input.

Find the bug(5)

  1. 1

    Fix the wrong property

    easy8 min

    Native control tinting uses accent-color.

  2. 2

    Fix the invalid value

    easy8 min

    Removing native styling uses the value none.

  3. 3

    Fix the misspelled property

    easy8 min

    The property is field-sizing.

  4. 4

    Fix the caret on the wrong element

    easy8 min

    The textarea should get the navy caret.

  5. 5

    Fix the accent on the wrong control

    easy8 min

    The accent was applied to the text input instead of the checkbox.

Ready to write the code?

The editor, the automatic checks and the worked solutions open up with an account.

Open the workspace