CSS How to align checkbox image


Tags: css

Problem :

I trying to style my checkbox with custom image, but what I have tried so far is the tick image stick with the text, this doesn't look good, how to make the tick image and text align nicely ?

JS Fiddle

What I want it look like this ✔ mango

CSS

.label{
    margin:5px;
    color: #ccc;
    font-size:12px;
    cursor:pointer;
}
.label:hover{
    color:#444;
}

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

input[type=checkbox] + .label {
padding:5px;

} 
input[type=checkbox]:checked + .label {
  color: #444;
  position:relative;
  margin:2px;

  background-image:url(http://icons.iconarchive.com/icons/custom-icon-design/mini/16/Accept-icon.png);
  background-repeat:no-repeat;
  background-color:#ccc;
}


Solution :

Note: From a usability point of view:

  • when only a single option should be selected, use radio buttons and not ticks.

  • currently you have to click the label twice to make a different selection; clicking on another option should deselect a previously checked option.


  • Use padding for the left of the label. In this example, padding-left: 10px

  • Position the background images x and y position. In this example I have placed it all in the background property:

    background: url(urlPath) 10px center no-repeat
    

That gives us this:

Screenshot

Example

var PG = {
  divid: "",
  multiselection: "",
  optionitem: [],
  init: function(divid, multiselection, optionitem) {
    PG.divid = divid;
    PG.multiselect = multiselection;
    PG.optionitem = optionitem;

  },
  test: function() {
    for (var i = 0; PG.optionitem.length > i; i++) {
      alert(PG.optionitem[i].name);
    }
  },

  render_1: function() {
    $.each(array, function(i, obj) {

      var selection = "<input class='the_checkbox' type='checkbox' id=" + obj.value + " name=" + obj.name + " value=" + obj.value + ">" +
        "<label class='label' for=" + obj.value + ">" + obj.value + "</label>" +
        "<div class='pbar'><div class='pbarinner' style='width:75%;'></div></div>";

      $("#" + PG.divid).append(selection);
      if ($('input#' + obj.value).is(':checked')) {
        $('.pbar').css('display', 'block');
      }


    });



    $("#survey_title").append("What is your favorite fruit??");
    $("#choose").append("Please select 1 fruit only:");

    $('.the_checkbox').on('change', function(evt) {
      if ($(this).siblings(':checked').length >= PG.multiselect) {
        this.checked = false;
      }
    });



  },
  render_2: function() {
    $.each(w_array, function(i, obj) {
      var selection = "<input class='the_checkbox' type='checkbox' id=" + obj.value + " name=" + obj.name + " value=" + obj.value + ">" +
        "<label class='label' for=" + obj.value + ">" + obj.value + "</label>";


      $("#" + PG.divid).append(selection);

    });

    $("#survey_title").append("item??");
    $("#choose").append("Please select 3 item :");

    $('.the_checkbox').on('change', function(evt) {
      if ($(this).siblings(':checked').length >= PG.multiselect) {
        this.checked = false;
      }
    });



  },
  save: function() {}
}


var array = [];
array[0] = {
  "name": "fruit",
  "value": "mango"
};
array[1] = {
  "name": "fruit",
  "value": "apple"
};
array[2] = {
  "name": "fruit",
  "value": "orange"
};
array[3] = {
  "name": "fruit",
  "value": "banana"
};


var w_array = [];
w_array[0] = {
  "name": "com",
  "value": "RAM"
};
w_array[1] = {
  "name": "com",
  "value": "DISK"
};
w_array[2] = {
  "name": "com",
  "value": "BOOK"
};
w_array[3] = {
  "name": "com",
  "value": "PEN"
};


PG.init("popupfoot", "1", array);
PG.render_1();
/*PG.init("survey_question", "3", w_array);
PG.render_2();*/
.label {
  margin: 5px;
  color: #ccc;
  font-size: 12px;
  cursor: pointer;
}
.label:hover {
  color: #444;
}
input[type=checkbox] {
  display: none;
}
input[type=checkbox] + .label {
  padding: 5px;
}
input[type=checkbox]:checked + .label {
  color: #444;
  position: relative;
  margin: 2px;
  background: url(http://icons.iconarchive.com/icons/custom-icon-design/mini/16/Accept-icon.png) 10px center no-repeat;
  background-color: #ccc;
  padding-left: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="popupfoot">
  <p id="survey_title"></p>
  <h5 id="choose"></h5>

  <div id="survey_question"></div>
</div>


    CSS Howto..

    CSS: how to apply styles to the last of a CSS class (not the last of )

    How to debug CSS/Javascript hover issues

    How to specify a device-specific css file when I compress all the css files using pipeline in Django?

    How do I make effect like this on image hover?

    Css how to create navigation bar

    How to apply effects to a unicode character in CSS? [closed]

    How to use padding and lengthen bootstrap search bar?

    How to display a portion of an image with CSS?

    Using pure Javascript to show contents of list on click only on mobile and show initially on desktop

    How to group CSS colors

    How to ease the whole css animation

    How do I keep the 'hover' effect while using a Jquery color change effect while scrolling

    how can the value of an href attribute be changed using javascript/css?

    Jquery hide / show div but to keep toggle link from “hiding” too

    Tag image in svg invisible in FireFox because of using style. How to fix?

    How do I put my index.html in the same folder as my other .html files on github?

    CSS: How to move text link to the right inside li

    How can I change the css properties of a google visualization table and it columns?

    How does the :not selector work to block older browsers and for which browsers does it work? [closed]

    How would I control the position of a drop down select menu?

    How can you print a page that has been altered by javascript?

    How can I fill a fixed-size
    with a variable-size

    ?

    How to make elements appear one by one using css animation

    How to create a ribbon shape in CSS

    selectCheckboxMenu: items are shown with bold font

    How to stop shadow effect from moving using pure css?

    How to add html and css in public function? [closed]

    How to have a two headings in same line with css?

    Newbie CSS/HTML: How to add ad in a div container to the side of the page?

    how to get text beside image button using CSS