Custom Check/Radio boxes

Vanilla check and radio boxes in your web browser look plane and ugly, everyone wants nicely styled and modern looking controls; there's many jquery widgets, that do this for you but what if i told you there was a simple solution using only css and no javascript.

the idea is to leverage the pseudo selector :checked,

here's our html, pretty simple just a label wrapping two spans letting us toggle the checkbox by clicking the content of the label.

<label>

    <input type="checkbox" />

    <span></span>

    <span>my checkbox</span>

</label>

and now the magic our css

label > input[type=checkbox] {

  display: none;

}

label > input[type=checkbox] + span {

  width: 20px;

  height: 20px;

  border: solid 1px #ccc;

  display: inline-block;

}

label > input[type=checkbox] + span:before {

  content: '\2713';

  color: transparent;

  display: block;

}

label > input[type=checkbox]:checked + span:before {

  content: '\2713';

  color: black;

  display: block;

  text-align: center;

}

label > input[type=checkbox] + span + span {

  user-select: none;

}

normally i'd use SCSS but figure why not make it vanilla

CSS selector

When it comes to selecting html tags by their ID or Class specifically in SharePoint you have id's that look like this"WebPartctl00_m_g_e7bf4283_529c_413e_884c_10c2adb8690a", now wtf is the jargon after webpart? I don't want to create a css selector that looks like

div#WebPartctl00_m_g_e7bf4283_529c_413e_884c_10c2adb8690a

so instead i'd use an attribute selector

div[id^="WebPart"] {

  font-size:1.5em; 

}

or i could use

div[id*="Part"] {

  font-size:1.5em; 

}

or if i hate myself

div[$="ctl00_m_g_e7bf4283_529c_413e_884c_10c2adb8690a"] {

  font-size=1.5em; 

}

so to sum it up

^= "selects text at the beginning of the attribute"
*= "selects text that's contained in our attribute"
$= "selects text at the end of the attribute"