Add CSS to HTML checkbox

Question

I have encountered some problem with my site. I want to add CSS to my button to be something like this which I found on the web. https://codepen.io/AllThingsSmitty/pen/WjZVjo I can't add an ID to it as I can't change the HTML code as it is auto generated by Wordpress. Any help would be appreciated.

<label class='grunion-field-label checkbox'>
    <input type='checkbox' name='g84-iagreetothetermsconditions' value='Yes' class='checkbox' required aria-required='true' />
    I agree to the Terms &amp; Conditions. <span>(required)</span>
</label>

I can't change the HTML code as it is auto generated by Wordpress - why can't you? — BenM
– BenM, Commented Apr 16, 2019 at 8:30
How is it generated by Wordpress? Are you using a Plugin for that? If yes, which? — yunzen
– yunzen, Commented Apr 16, 2019 at 8:30
Can you try editing the css file and add label.checkbox .grunion-field-label{yourCss} ? (same idea for the rest of the classes) — Lev Buchel
– Lev Buchel, Commented Apr 16, 2019 at 8:32
You can't use that anyway as your input is inside your label - you need the input to be before the label if you want to use the styles in the codepen — Pete
– Pete, Commented Apr 16, 2019 at 8:33

Hanif · Accepted Answer · 2019-04-16 10:58:27Z

With your current DOM structure you go with following snippet:

.grunion-field-label {
  position: relative;
  display:inline-block;
  padding-left:10px;
  line-height:30px;
}

.grunion-field-label::before {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  cursor: pointer;
  height: 28px;
  left: 0;
  position: absolute;
  top: 0;
  width: 28px;
  content:"";
}

.grunion-field-label input[type="checkbox"] + span::after {
  border: 2px solid #fff;
  border-top: none;
  border-right: none;
  content: "";
  height: 6px;
  left: 7px;
  opacity: 0;
  position: absolute;
  top: 8px;
  transform: rotate(-45deg);
  width: 12px;
}

.grunion-field-label input[type="checkbox"] {
  visibility: hidden;
}

.grunion-field-label input[type="checkbox"]:checked + span::after {
  border-color: #f00;
  opacity: 1;
}

<label class='grunion-field-label checkbox'>
    <input type='checkbox' name='g84-iagreetothetermsconditions' value='Yes' class='checkbox' required aria-required='true' />
    I agree to the Terms &amp; Conditions. <span>(required)</span>
</label>

Chaska · Accepted Answer · 2019-04-16 09:13:13Z

0

You may add external css to re-style the checkbox and also you may need to get some help from javascript.

(function($) {

  $('input[type="checkbox"]').on('click', function() {
    if ($(this).is(':checked')) {
      $(this).closest('label').addClass('checked');
    } else {
      $(this).closest('label').removeClass('checked');
    }
  });

})(jQuery);

.grunion-field-label.checkbox {
  position: relative;
  padding-left: 24px;
}
.grunion-field-label.checkbox input[type="checkbox"] {
  display: none;
}
.grunion-field-label.checkbox:before {
  content: " ";
  position: absolute;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
}
.grunion-field-label.checkbox.checked:after {
  content: " ";
  position: absolute;
  top: 4px;
  left: 8px;
  border: 2px solid #fff;
  border-left: none;
  border-top: none;
  width: 4px;
  height: 8px;
  transform: rotate(45deg);
}

.grunion-field-label.checkbox.checked:before {
  background-color: #0c0;
  border-color: #0c0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class='grunion-field-label checkbox'>
    <input type='checkbox' name='g84-iagreetothetermsconditions' value='Yes' class='checkbox' required aria-required='true' />
    I agree to the Terms &amp; Conditions. <span>(required)</span>
</label>

edited Apr 16, 2019 at 9:13

answered Apr 16, 2019 at 9:04

Chaska

3,2151 gold badge13 silver badges17 bronze badges

3 Comments

HysanDev Over a year ago

Thanks for the information. However, I got this too high. Anyway to solve? i.imgur.com/d3gsjb6.jpg

Chaska Over a year ago

Try to adjust the value of top in both before and after pseudo elements.

HysanDev Over a year ago

Works great! Thanks, do you know how to edit the font weight of "I agree to the Terms & Conditions."

Collectives™ on Stack Overflow

Add CSS to HTML checkbox

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related