How to create a custom checkbox with an icon/image-Twitter bootstrap

MelbinMathai
March 15, 2018
108 views
0 votes
2 Answers

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>

Answers

 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>

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>

Please signup or login to give your own answer.

Click here to cancel reply.