Learn how to style radio buttons and check boxes to look like buttons.
- [Instructor] Another technique for styling radio buttons…or check boxes is to replace each check box or radio button…with a button style selector.…This is an example of what the finished exercise…will look like.…And you can select each one just like you would a check box.…So this is actually what we're going to start with,…and then style.…It's just check boxes inside a field set.…So I'm going to go to my CSS.…And I'm going to style input and then type equals check box.…
And the first styles I'm going to add are opacity of zero,…to hide the check box itself,…with the zero and a margin of zero.…So now we just have the words right there.…Now I'm going to add styles to the labels…to make them look like buttons.…So I'm going to copy and paste and put type check box,…and it's going to be plus label,…that's the adjacent sibling selector, to style every label…that's after the input of a type check box.…
And I'm going to add a bunch of styles here.…You can add whatever styles you want.…These are just some styles I'm choosing to make it look…
- 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.