Styling Checkboxes with CSS

Checkboxes are a fundamental element of web forms, allowing users to select options from a list. By default, checkboxes have a standard appearance that may not match the design of your website or application. Fortunately, it is possible to style checkboxes using CSS, giving you control over their appearance and behavior.

To style a checkbox, you need to use the :before and :after pseudo-classes to create a custom checkbox element. The :before pseudo-class is used to create the checkbox box, while the :after pseudo-class is used to create the check mark or other visual indicator of selection.

Here’s an example of how you can style a checkbox using CSS:

.myinput[type="checkbox"]:before {
  position: relative;
  display: block;
  width: 11px;
  height: 11px;
  border: 1px solid #808080;
  content: "";
  background: #FFF;
}

.myinput[type="checkbox"]:after {
  position: relative;
  display: block;
  left: 2px;
  top: -11px;
  width: 7px;
  height: 7px;
  border-width: 1px;
  border-style: solid;
  border-color: #B3B3B3 #dcddde #dcddde #B3B3B3;
  content: "";
  background-image: linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
  background-repeat: no-repeat;
  background-position: center;
}

.myinput[type="checkbox"]:checked:after {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
}

In this example, the :before pseudo-class is used to create a checkbox box with a width and height of 11 pixels. The :after pseudo-class is used to create a check mark with a width and height of 7 pixels. When the checkbox is checked, the background image of the check mark changes.

You can also style checkboxes for different states, such as disabled or hovered. For example:

.myinput[type="checkbox"]:disabled {
  opacity: 0.5;
}

.myinput[type="checkbox"]:hover {
  border-color: #ccc;
}

In this example, the :disabled pseudo-class is used to set the opacity of the checkbox to 0.5 when it is disabled. The :hover pseudo-class is used to change the border color of the checkbox to #ccc when it is hovered.

Another way to style checkboxes is by using a flipswitch approach, where the checkbox is replaced with a toggle button that flips between two states. Here’s an example:

<input type="checkbox" class="flipswitch">
<span></span>

.flipswitch {
  position: relative;
  background: white;
  width: 120px;
  height: 40px;
  -webkit-appearance: initial;
  border-radius: 3px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  outline: none;
  font-size: 14px;
  font-family: Trebuchet, Arial, sans-serif;
  font-weight: bold;
  cursor: pointer;
  border: 1px solid #ddd;
}

.flipswitch:after {
  position: absolute;
  top: 5%;
  display: block;
  line-height: 32px;
  width: 45%;
  height: 90%;
  background: #fff;
  box-sizing: border-box;
  text-align: center;
  transition: all 0.3s ease-in 0s;
  color: black;
  border: #888 1px solid;
  border-radius: 3px;
}

.flipswitch:after {
  left: 2%;
  content: "OFF";
}

.flipswitch:checked:after {
  left: 53%;
  content: "ON";
}

In this example, the flipswitch class is used to style the checkbox as a toggle button. The :after pseudo-class is used to create a label that flips between two states when the checkbox is checked or unchecked.

Overall, styling checkboxes with CSS gives you a lot of flexibility and control over their appearance and behavior. By using the :before and :after pseudo-classes, you can create custom checkbox elements that match your website or application’s design.