Skip to main content

CSS Input Fields — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the CSS Input Fields 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

    Round the field

    easy10 min

    Give #input a 6px border radius.

  2. 2

    Size the field

    easy10 min

    Make #input 240px wide.

  3. 3

    Colour the caret

    easy10 min

    Make the text cursor in #input blue.

  4. 4

    Add a visible outline

    easy10 min

    Give #input a 2px solid navy outline.

  5. 5

    Build a comfortable field

    medium10 min

    16px text, 10px padding, 6px radius.

Find the bug(5)

  1. 1

    Fix the missing unit

    easy8 min

    A border radius needs a unit.

  2. 2

    Fix the wrong property

    easy8 min

    An element's width is set with width.

  3. 3

    Fix the caret property

    easy8 min

    The text cursor colour is caret-color.

  4. 4

    Fix the outline with no style

    easy8 min

    An outline needs a style to be drawn.

  5. 5

    Fix the tiny text

    easy8 min

    Fields below 16px cause zooming on mobile.

Ready to write the code?

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

Open the workspace