How to create a custom checkbox with an icon/image

Question

I need to Custom my checkbox like this image. How can I do that? Please help me to do this.

Here is My code. But its Just a tag and contents only. I need to select these tags when a user clicks. and also user can deselect this tags. This should work like a checkbox.

.off-white-one{
	background-color: #e4e8f2;
}
.off-white-two{
	background-color: #dde2ee;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.3/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
        <div class="row mt-30">
          <a href="" class="col-sm-4 col-xs-12 wrapper-xl dk fadeInRight animated off-white-two a-block"  data-animation="fadeInRight" data-delay="500">
            <p class="text-center">
              <span class="fa fa-stack fa-2x">
                <i class="fa fa-circle fa-stack-2x text-white"></i>
                <i class="fa fa-clock-o fa-stack-1x text-info"></i>
              </span>
            </p>
            <div>
              <h3 class="text-center">Late Check-outs</h3>
            </div>
          </a>
          <a href="" class="col-sm-4 col-xs-12 wrapper-xl fadeInDown animated off-white-one a-block"  data-animation="fadeInDown" data-delay="750">
            <p class="text-center">
              <span class="fa fa-stack fa-2x">
                <i class="fa fa-circle fa-stack-2x text-white"></i>
                <i class="fa fa-tint fa-stack-1x text-info"></i>
              </span>
            </p>
            <div>
              <h3 class="text-center">Mid-Stay Cleaning</h3>
            </div>
          </a>
          <a href="" class="col-sm-4 col-xs-12 wrapper-xl dker fadeInLeft animated off-white-two a-block data-animation="fadeInLeft" data-delay="1000">
            <p class="text-center">
              <span class="fa fa-stack fa-2x">
                <i class="fa fa-circle fa-stack-2x text-white"></i>
                <i class="fa fa-plus-circle fa-stack-1x text-info"></i>
              </span>
            </p>
            <div>
              <h3 class="text-center">More towels & Sheetbeds</h3>
            </div>
          </a>
        </div>
      </div>

where do you want to start? HTML 101? Javascript 101? CSS 101? Not sure I can cover lessons in all three in a single comment, but I'll try ... — Jaromanda X
– Jaromanda X, Commented Mar 15, 2018 at 5:13
@MelbinMathai The question is too broad. It is generally expected that the asker will attempt to solve the problem themselves, and demonstrate their attempts in the question so that community can help fix the issues in their attempt. — Nisarg Shah
– Nisarg Shah, Commented Mar 15, 2018 at 5:18

Nitin Dhomse · Accepted Answer · 2018-03-15 08:52:34Z

One sample custom check box is designed as per your requirement, you can change image, colors and size there as you need.

$('.input_class_checkbox').each(function(){
    $(this).hide().after('<div class="class_checkbox" />');

});

$('.class_checkbox').on('click',function(){
    $(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked'))
    if($(this).is('.checked')){
      $(this).addClass("clock-img");
    }else{
      $(this).removeClass("clock-img");
    }
});

.class_checkbox {
    width: 50px;  
    height: 50px;
    
}
#circle{
  margin-left : 16px;
   border: 2px solid #aeaec5;
    background-color: white;
    width: 64px;
    height: 64px; 
    border-radius: 32px; 
}
.checkbox-container{
  background-color:#86bbf3;
  width:100px;
  height:100px;
  padding-top: 8px;
}

.clock-img{
  background:url('https://cdn0.iconfinder.com/data/icons/super-mono-basic/blue/alarm-clock_basic_blue.png') no-repeat;
}

#circle div { position:relative; left: 4px; top: 2px; width: 90px; height: 90px; color: white; text-align:center; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class= "checkbox-container">

  <div id="circle"><div><input type="checkbox" class="input_class_checkbox"></div></div>
  <div>
  Late check out
  </div>
</div>

Nirav Gol · Accepted Answer · 2018-03-15 05:39:01Z

 label:before {
      content: url("https://cdn1.iconfinder.com/data/icons/windows8_icons_iconpharm/26/unchecked_checkbox.png");
      position: absolute;
      z-index: 100;
    }
    :checked+label:before {
      content: url("https://cdn1.iconfinder.com/data/icons/windows8_icons_iconpharm/26/checked_checkbox.png");
    }
    input[type=checkbox] {
      display: none;
    }
    /*pure cosmetics:*/
    img {
      width: 150px;
      height: 150px;
    }
    label {
      margin: 10px;
    }

 


 

<input type="checkbox" id="myCheckbox1" />
    <label for="myCheckbox1">
      <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR0LkgDZRDTgnDrzhnXGDFRSItAzGCBEWEnkLMdnA_zkIH5Zg6oag">
    </label>
    <input type="checkbox" id="myCheckbox2" />
    <label for="myCheckbox2">
      <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRhJjGB3mQxjhI5lfS9SwXou06-2qT_0MjNAr0atu75trXIaR2d">
    </label>
    <input type="checkbox" id="myCheckbox3" />
    <label for="myCheckbox3">
      <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQuwWbUXC-lgzQHp-j1iw56PIgl_2eALrEENUP-ld72gq3s8cVo">
    </label>

Collectives™ on Stack Overflow

How to create a custom checkbox with an icon/image

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related