Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • Custom checkbox having Images

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 454
    Comment on it

    Hello Readers

    We are all familiar with Checkbox and Custom Checkbox too, In this blog I am Explaining about Custom checkbox having images, Images are used in checkbox to make them look more interactive and appealing. We must have surely noticed a thing about images that it will add beauty to any web page. When you click on an image it will look like it is a clickable event, But here I write pure CSS which makes checkboxes more attractive.

    Html Source Code

    <div style="margin-top:10px;">
    	<input type="checkbox" class="cust-checkbox" id="1">
    	<label class="cust-checkboxLabel" for="1">
    		<img src="img/1.png">
    	<input type="checkbox" class="cust-checkbox" id="2">
    	<label class="cust-checkboxLabel" for="2">
    		<img src="img/1.png">

     Css Source Code:

    background-color: #e8e8e8;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    margin: 0;
    position: relative;
    vertical-align: middle; }
    .cust-checkbox{opacity: 0;position: absolute;left: -99999}
    .cust-checkboxLabel{padding-right: 46px;position: relative;}
    .cust-checkbox + .cust-checkboxLabel::before{background-image: url(img/twitter-xl.png);  
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 28px auto;
    content: "";
    height: 48px;
    position: absolute;
    right: 0;
    width: 46px;}
    .cust-checkbox:checked + .cust-checkboxLabel::before{background-image: url(img/images.png); background-color: #fff;}

     Definitely try this! Or you can download the zip file from the below link.



 0 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: