CODEWITHSUNDEEP
csscheckbox
user2307087
user2307087

Reputation: 423

unclickable checkbox - css only

I have been working on customize a checkbox. I am not able to unclick the checkbox since I modified to be rounded.
What's wrong with the following codes?

In Html, 

<div class="checkbox-circle">
    <input id="checkbox-1" type="checkbox" checked />
    <label for="checkbox-1">Checkbox 1</label>
</div>

In CSS, 

.checkbox-circle input[type="checkbox"] {
   display: none;
}
.checkbox-circle label {
   display: inline-block;
   cursor: pointer;
   position: relative;
   padding-left: 25px;
   margin-right: 12px;
}
.checkbox-circle label:before {
   content: '';
   display: inline-block;
   width: 15px;
   height: 15px;
   position: absolute;
   left: 0;  
   border: 1px solid #cccccc;
   border-radius: 3px;
}
.checkbox-circle input[type="checkbox"]:checked + label:before {
   font-size: 13px;
   color: #5bc0de;
   text-align: center;
   line-height: 11px;
   font-family: 'Glyphicons Halflings';
   content: "\e013";

}

It's showing as what I wanted but not clickable at all. Thanks in advance -css only.

Upvotes: 0

Views: 8678

Answers (3)

PhilG
PhilG

Reputation: 11

It's very easy with CSS :

.noclick {pointer-events:none;}

<input class="noclick type="checkbox">

Upvotes: 1

Jonathan Argentiero
Jonathan Argentiero

Reputation: 5727

The problem is caused by the fact you are using display:none to hide the checkbox and it doesn't work on all environments.

I suggest you a safer implementation with this code:

.checkbox-circle input[type="checkbox"] {
    opacity: 0; // instead of display:none
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    z-index: 2; // or above
}

the concept is having the user clicking a real -invisible- checkbox and propagating the style using the :checked selector as you did.

Upvotes: 1

DanielGibbs
DanielGibbs

Reputation: 10190

You didn't modify the checkbox; you hid the checkbox and added your own checkbox-like element. Because the checkbox is hidden you can't click on it, therefore the state won't change.

If you want to do it this way then you will need to add some Javascript to link the state of the hidden checkbox to your custom checkbox element and to change the state when your element is clicked on.

Edit: Actually I'm wrong about this, I forgot that clicking on the label can toggle the state of the checkbox, oops. It still might be easier to use Javascript than to hide the checkbox though.

Upvotes: 1

Related Questions