Home / Questions / 41526
Accepted
Pavlo B.
Asked: 2020-12-30 07:12:59 +0800 CST 2020-12-30 07:12:59 +0800 CST

How to make a hidden, custom checkbox?

  • 772

I am trying to make a checkboxcustom in which the background color of my is changed labeldepending on whether it is selected or not, and in this way hide the checkboxitself. The code I have is this:

.milabel {
  background-color:#c9c9c9;
  border-radius:5px;
  padding:20px;
  cursor:pointer;
  }
input:checked{
  }
<input id="micb" type="checkbox"><br><br>
<label class="milabel" for="micb"> Hola mundo! Soy clickeable </label>

I know that with input:checkedit you can modify the checkboxitself to give it a certain style but I don't know.

html

3 Answers

  1. Best Answer

    To change the color oflabel

    .checkBoxLabel {
  width: 200px;
  padding: 10px 0;
  background-color:#c9c9c9;
  border-radius:5px;  
  cursor:pointer;
  text-align: center;
  display: inline-block;
}

.checkBox:checked + .checkBoxLabel {
  background-color: pink;
  color: #fff;
}

div {
  margin-top: 40px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
    <div>
  <input type="checkbox" id="check" class="checkBox">
  <label for="check" class="checkBoxLabel">My Label</label>
</div>

    Update:

    To hide the checkboxon select labelyou can use a bit of jQuery:

    $('.checkBoxLabel').click(function(){
  
  var checkbox = $('#check');
  
  if ( checkbox.css('visibility') == 'hidden' ) {
    
    checkbox.css('visibility','visible');
    
  } else {
    
    checkbox.css('visibility','hidden');
  }
});
    .checkBoxLabel {
  width: 200px;
  padding: 10px 0;
  background-color:#c9c9c9;
  border-radius:5px;
  cursor:pointer;
  text-align: center;
  display: inline-block;
}

.checkBox:checked + .checkBoxLabel {
  background-color: pink;
  color: #fff;
}

div {
  margin-top: 40px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="checkbox" id="check" class="checkBox">
  <label for="check" class="checkBoxLabel">My Label</label>
</div>

    • 5

  2. The background of the checkbox itself cannot be changed.

    However, you can hide the checkboxand use the labelone associated with it to simulate the checkbox. As it is labelassociated with the checkbox, we can give it styles according to the events that it has checkboxat any given time.

    In this case, for the checkbox state falsethe label will be red and when the checkbox state is true, the label will be green.

    input[type="checkbox"]{
  display: none;
}

input[type="checkbox"] + label{
  display: inline-block;
  height: 20px;
  width: 20px;
  background-color: red;
  border-radius: 5px;
}

input[type="checkbox"]:checked + label{
  background-color: green;
}
    <input id="micb" type="checkbox">
<label class="milabel" for="micb"></label>
<span>Hola mundo! Soy clickable!</span>

    • 4

  3. In SO in English you have this solution without labels, spans, etc., just with pseudo-elementos:

        label {
        user-select: none;
    }
    
    input[type="checkbox"] {
        appearance: none;
    }
    
    input[type="checkbox"]:after {
        content: '';
        display: inline-flex;
        align-items: center;
        justify-content: center; 
        width: 14px;
        height: 14px;
        line-height: 14px;
        border: 1px solid grey;
        border-radius: 3px;
        vertical-align: bottom;
    }
    
    input[type="checkbox"]:checked:after {
        content: '✓';
        background-color: black;
        color: white;
    }
        <label>
        <input id="micb" type="checkbox">
        <span>Hola mundo! Soy clickable!</span>
    </label>

    • 1