Learn how to use images to style radio buttons and checkboxes.
- [Instructor] In this video, we'll look at…how to style radio buttons and check boxes with images.…Styles work exactly the same for both,…so I'm just going to show you check boxes,…but you can substitute radio buttons and do the same styles.…We starting off with a set of check boxes and a field set.…I'm going to go to the style sheet,…where I'm starting off with the default styles…and I'm going to add styles for input and type=checkbox.…I'm going to try adding a border of one pixel solid in red…and then, a background color of gray.…
And then when I go back here and refresh, nothing happens.…That's because you can't actually apply borders…and background colors to the check boxes themselves.…However, you can put the inputs inside of the label elements…and then apply the styles to the label.…Okay, I'm going to cut and paste the input from line 16…and paste it into line 17 and cut and paste the input…from line 19 and paste it into 20…and, cut from 22 and paste it into 23.…
Then take out the empty spaces,…and then save this, and then go back the styles…
- How users interact with forms
- Designing forms that are easy to use
- Following data privacy laws when collecting information
- Choosing which HTML input types to use
- Adding buttons
- Adding interactive validation
- Styling form fields with CSS
- Using positioning and flexbox to create responsive form layouts
Skill Level Beginner
Building Web Applications with Ajaxwith Sasha Vodnik1h 31m Intermediate
1. Designing a Form Experience
2. Creating Forms with HTML
3. Making Forms Interactive
4. Styling Form Fields with CSS
5. Form Layout with CSS
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.