Style checkboxes in embedded MailChimp subscribe form

Site URL: https://cyan-teal-3zmw.squarespace.com/subscribe

I'm looking to style the checkboxes in an embedded MailChimp subscribe form – specifically, I'm trying to change the background color when they're checked. I've tried using "input[type=checkbox]:checked" to target them in my CSS but I'm not having any luck. Any help would be hugely appreciated.

Password = governance

On 3/20/2021 at 1:25 AM, dvgdvgdvg said:

Site URL: https://cyan-teal-3zmw.squarespace.com/subscribe

I'm looking to style the checkboxes in an embedded MailChimp subscribe form – specifically, I'm trying to change the background color when they're checked. I've tried using "input[type=checkbox]:checked" to target them in my CSS but I'm not having any luck. Any help would be hugely appreciated.

Password = governance

Checkbox can not be style like this, try this

#mc_embed_signup .mc-field-group.input-group input[type=checkbox] {
  position: absolute;
  opacity: 0;
}
#mc_embed_signup .mc-field-group.input-group input[type=checkbox] ~ label:before {
  content: '';
  position: absolute;
  top: -2.5px;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}
#mc_embed_signup .mc-field-group.input-group input[type=checkbox]:checked ~ label:before {
  background-color: #41a0ce;
}
#mc_embed_signup .mc-field-group.input-group input[type=checkbox]:checked ~ label:after {
  display: block;
}
#mc_embed_signup .mc-field-group.input-group input[type=checkbox] ~ label:after {
  content: "";
    position: absolute;
      left: 7.5px;
    top: 0px;
    width: 7px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(
45deg
);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  display: none;
}
#mc_embed_signup .mc-field-group.input-group input[type=checkbox] ~ label {
  sbackground-color: #ccc;
  position: relative;
  display: inline-block;
  text-indent: 25px
}

learn more about technique here

How To Create a Custom Checkbox and Radio Buttons (w3schools.com)

On 3/22/2021 at 8:27 AM, bangank36 said:

Checkbox can not be style like this, try this

#mc_embed_signup .mc-field-group.input-group input[type=checkbox] {
  display: none;
}
#mc_embed_signup .mc-field-group.input-group input[type=checkbox] ~ label:before {
  content: '';
  position: absolute;
  top: -2.5px;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}
#mc_embed_signup .mc-field-group.input-group input[type=checkbox]:checked ~ label:before {
  background-color: #41a0ce;
}
#mc_embed_signup .mc-field-group.input-group input[type=checkbox]:checked ~ label:after {
  display: block;
}
#mc_embed_signup .mc-field-group.input-group input[type=checkbox] ~ label:after {
  content: "";
    position: absolute;
      left: 7.5px;
    top: 0px;
    width: 7px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(
45deg
);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  display: none;
}
#mc_embed_signup .mc-field-group.input-group input[type=checkbox] ~ label {
  sbackground-color: #ccc;
  position: relative;
  display: inline-block;
  text-indent: 25px
}

learn more about technique here

How To Create a Custom Checkbox and Radio Buttons (w3schools.com)

Thanks! This looks great in theory, but unfortunately I believe using "display:none" to hide the default input makes the form inaccessible for screen reader users; if that's the case, then this approach should be avoided.

14 minutes ago, dvgdvgdvg said:

Thanks! This looks great in theory, but unfortunately using "display:none" to hide the default input makes the form inaccessible for screen reader users (as far as I know), so that should be avoided.

I just updated the code to hide it using absolute positioning, you can take reference of how to hide checkbox in this article, within the scope of these questions I can not go in detail. Hope that helps

Inclusively Hiding & Styling Checkboxes and Radio Buttons (sarasoueidan.com)

55 minutes ago, bangank36 said:

I just updated the code to hide it using absolute positioning, you can take reference of how to hide checkbox in this article, within the scope of these questions I can not go in detail. Hope that helps

Inclusively Hiding & Styling Checkboxes and Radio Buttons (sarasoueidan.com)

Thanks so much! I'll test this out 🙂

On 3/22/2021 at 8:27 AM, bangank36 said:

Checkbox can not be style like this, try this

#mc_embed_signup .mc-field-group.input-group input[type=checkbox] {
  position: absolute;
  opacity: 0;
}
#mc_embed_signup .mc-field-group.input-group input[type=checkbox] ~ label:before {
  content: '';
  position: absolute;
  top: -2.5px;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}
#mc_embed_signup .mc-field-group.input-group input[type=checkbox]:checked ~ label:before {
  background-color: #41a0ce;
}
#mc_embed_signup .mc-field-group.input-group input[type=checkbox]:checked ~ label:after {
  display: block;
}
#mc_embed_signup .mc-field-group.input-group input[type=checkbox] ~ label:after {
  content: "";
    position: absolute;
      left: 7.5px;
    top: 0px;
    width: 7px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(
45deg
);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  display: none;
}
#mc_embed_signup .mc-field-group.input-group input[type=checkbox] ~ label {
  sbackground-color: #ccc;
  position: relative;
  display: inline-block;
  text-indent: 25px
}

learn more about technique here

How To Create a Custom Checkbox and Radio Buttons (w3schools.com)

You're my hero @bangank36 – with some tweaks, this worked exactly as I hoped! I made some modifications and added focus states for accessibility. In case it's helpful for anyone else, here's the revised CSS:

/* hide existing checkbox */
#mc_embed_signup .mc-field-group.input-group input[type=checkbox] {
  position: absolute;
  opacity: 0;
}
/* new checkbox styling */
#mc_embed_signup .mc-field-group.input-group input[type=checkbox] ~ label:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #fff;
  border: 1px solid #ABB0B2;
  border-radius: 3px;
  box-sizing: border-box;
}
#mc_embed_signup .mc-field-group.input-group input[type=checkbox]:focus ~ label:before {
  border-color: #333;
}
#mc_embed_signup .mc-field-group.input-group input[type=checkbox]:checked ~ label:before {
  background-color: #299fce;
  border: 1px solid #299fce;
}
#mc_embed_signup .mc-field-group.input-group input[type=checkbox]:focus:checked ~ label:before {
  border-color: #20305f!important;
}
#mc_embed_signup .mc-field-group.input-group input[type=checkbox]:checked ~ label:after {
  content: "";
  position: absolute;
  left: 6px;
  top: 3px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  display: block;
}
/* checkbox label */
#mc_embed_signup .mc-field-group.input-group input[type=checkbox] ~ label {
  background-color: #fff;
  position: relative;
  display: inline-block;
  text-indent: 18px;
}

@dvgdvgdvg I see your site, tablet, has white bar on right of screen.

You can add this to Subscribe Page Header

<style>
  @media screen and (max-width:991px) and (min-width:768px) {
  html, body {
    overflow-x: hidden;
}
  }
</style>

4 hours ago, tuanphan said:

@dvgdvgdvg I see your site, tablet, has white bar on right of screen.

You can add this to Subscribe Page Header

<style>
  @media screen and (max-width:991px) and (min-width:768px) {
  html, body {
    overflow-x: hidden;
}
  }
</style>

 

Ah thank you for the heads up! It looks like the footer form was causing this; I removed the "width:auto" setting I'd applied to .newsletter-form-fields-wrapper and that appears to have resolved it. Let me know if the overflow/white edge is still showing up for you though. Appreciate it!

On 3/26/2021 at 9:13 PM, dvgdvgdvg said:

Ah thank you for the heads up! It looks like the footer form was causing this; I removed the "width:auto" setting I'd applied to .newsletter-form-fields-wrapper and that appears to have resolved it. Let me know if the overflow/white edge is still showing up for you though. Appreciate it!

Now I see fine (y)