From the course: HTML & CSS: Creating Forms
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Styling radio buttons and check boxes as buttons - HTML Tutorial
From the course: HTML & CSS: Creating Forms
Styling radio buttons and check boxes as 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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
(Locked)
Basic form styles: Text color and size6m 44s
-
(Locked)
Box sizing for forms2m 29s
-
(Locked)
Styling text inputs4m 39s
-
(Locked)
Styling radio buttons and check boxes with images6m 20s
-
(Locked)
Styling radio buttons and check boxes as buttons3m 7s
-
(Locked)
Styling select5m 25s
-
(Locked)
Styling buttons10m 10s
-
(Locked)
Styling pseudo-classes6m 37s
-
(Locked)
-
-