SuperDJ SuperDJ - 1 year ago 79
CSS Question

Unable to click checkboxes after styling

I have tried to style some checkboxes but now I can't click on/ activate/ check them. Radio buttons that are mostly styled the same way do work.

$(document).ready(function() {
var $selection = $('.sc-checkbox');

$selection.each(function() {
var $this = $(this),
$id = $this.attr('id');

$this.after( '<label for="' + $id + '"></label>' );

input[type="checkbox"].sc-checkbox {
-webkit-opacity: 0;
opacity: 0;
left: -102%;
position: absolute
padding: 0 5px 0 10px;
input[type="checkbox"].sc-checkbox+label:before {
content: '';
display: inline-block;
background: transparent;
border: .14286rem solid rgba(0, 0, 0, 0.54);
width: .92857rem;
height: .92857rem;
border-radius: .14286rem;
font-family: 'Material Icons';
position: relative;
vertical-align: middle;
left: 0;
line-height: .92857rem;
-webkit-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1)

input[type="checkbox"].sc-checkbox:checked+label:before {
background: #3f51b5;
border: .14286rem solid #3f51b5;
content: '\E5CA';
color: #fff

<script src=""></script>
<link href=""
<input type="checkbox" class="sc-checkbox" id="test"></label><label for="test">Test</label>
<input type="checkbox" class="sc-checkbox" id="test1" checked></label><label for="test1">Test1</label>

When you run the example everything works but on the website it doesn't work.
I have fiddled around with positions, paddings and margins on the
but nothing seems to be working.

I hope someone can help me make the checkboxes work again.

Thanks in advance.

Answer Source

You have a code that fixes a bug when text field isn't selected when label is clicked:

textfields.js, line 30:

// Fix bug that text field isn't selected when label is clicked
$('label').click(function() {
    var $id = $(this).attr('for');

However this code cause your click on the label to be triggered twice, so you get two clicks on the checkbox (which causes your checkbox to be checked and then unchecked immediately, or the opposite).

I'm not sure if you really need this code or not, but you can change your fix-bug to something like this:

// Fix bug that text field isn't selected when label is clicked
$('label').click(function() {
    var $id = $(this).attr('for');
    if ($('#'+$id).is(':checkbox')) {
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download