Give #check a red accent colour.
Acceptance criteria
- 1.Give #check a red accent colour.
CSS Tutorial · CSS Accessibility
These 10 tasks go with the Modern Form Styling chapter. 5 of them ask you to build something small from scratch; 5 give you code that is already broken and ask you to work out why. Set aside about 90 minutes for the whole set, though you can do them in any order.
Nothing here is marked by a person. When you press Submit, the editor checks your code against the points listed under each task and tells you straight away what passed and what didn't (you need a free account to submit). If you get stuck, there are hints, and a worked solution once you've had a go. The first 2 tasks are free; the rest are part of the practice plan.
If it's been a while since you read the chapter, here is how it starts: “Style native controls without discarding their states, platform behavior, or accessibility. The examples style inherited typography, borders, accent-color, validation, disabled controls, focus, autofill, and the risks of appearance: none.” .
1.Tint the checkboxexercise · easy · 10 min
Give #check a red accent colour.
Passes when: Give #check a red accent colour.
2.Strip the native lookexercise · easy · 10 min · practice plan
Remove the built-in styling from #input.
Passes when: Remove the built-in styling from #input.
3.Size a field to its contentexercise · easy · 10 min · practice plan
Let #input grow with what is typed.
Passes when: Let #input grow with what is typed.
4.Colour the caretexercise · easy · 10 min · practice plan
Make the caret in #area navy.
Passes when: Make the caret in #area navy.
5.Theme a control setexercise · medium · 10 min · practice plan
Red accent on the checkbox, rounded and padded input.
Passes when: Red accent on the checkbox, rounded and padded input.
6.Fix the wrong propertybug fix · easy · 8 min
Native control tinting uses accent-color.
Passes when: Native control tinting uses accent-color.
7.Fix the invalid valuebug fix · easy · 8 min · practice plan
Removing native styling uses the value none.
Passes when: Removing native styling uses the value none.
8.Fix the misspelled propertybug fix · easy · 8 min · practice plan
The property is field-sizing.
Passes when: The property is field-sizing.
9.Fix the caret on the wrong elementbug fix · easy · 8 min · practice plan
The textarea should get the navy caret.
Passes when: The textarea should get the navy caret.
10.Fix the accent on the wrong controlbug fix · easy · 8 min · practice plan
The accent was applied to the text input instead of the checkbox.
Passes when: The accent was applied to the text input instead of the checkbox.
Between them these tasks cover accent-color, appearance and field-sizing.
Looking for a different chapter? See every practice set, or switch to the interview theory questions.