Campsite Coders

Learn CSS

Learn to code and become a Front End Web Developer

Campsite Coders Bootcamp Coding Advenuture

How to Style Checkboxes with CSS

You may want your check boxes to be larger than the default size. This is possible with CSS. You can also style the text beside the checkbox. See the examples below to learn how you can style html checkboxes.

How To Make Checkboxes Larger

There may be times when you want to make the box next to the option larger than the default. This code will demonstrate how to add styles to your CSS code that will make the checkbox bigger.

HTML

html checkoxes checked

CSS

css stylng checkboxes

RESULTS

example styled checkboxes

NOTES

It is possible to have the unchecked and checked boxes styled to different sizes (although I'm not sure why you would do that) so you have to define both stages of the checkbox - checked and nothing (unchecked).

How To Make Text Larger

If you just want to make the text next to the checkbox larger, this is how you write the code for that:

HTML

html checkoxes make larger

CSS

css styling checkbox

RESULTS

example bigger checkboxes

NOTES


You can change the text next to the checkbox but not by defining your style to the checkbox itself. Instead, you need to wrap your checkboxes in a container tag and define your style in it as we did here using the 'set2 id'. However, if you want a sentence directly above the checkboxes but you don't want it to be the same color as your checkbox labels, then you'll need to wrap that text in a span tag and give it a different font color.


Try creating your own unique check boxes using CSS before moving ahead.

Campsite Coders Bootcamp Coding Adventure
Road Map for Coding Adventure One

Campsite Coders

56747 Ewing Rd

Moffat, CO 81143

720-515-1124

Campsite Coders logo in footer

Copyright 2023 . All rights reserved