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 with images

Styling radio buttons and check boxes with images - HTML Tutorial

From the course: HTML & CSS: Creating Forms

Start my 1-month free trial

Styling radio buttons and check boxes with images

“

- [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…

Contents