CSS如何对齐复选框图像

Question

我尝试使用自定义图像设置我的复选框样式，但到目前为止我所尝试的是带有文本的刻度图像棒，这看起来不太好，如何使刻度图像和文本很好地对齐？

JS Fiddle

我希望它看起来像✔ 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;
}

Answer 1

注意：从可用性的角度来看：

• 如果只选择一个选项，请使用单选按钮而非刻度。

• 目前您必须单击两次标签才能进行不同的选择;单击其他选项应取消选择以前选中的选项。

---

• 在标签的左侧使用填充。在此示例中，padding-left: 10px

• 定位背景图像的x和y位置。在这个例子中，我将它全部放在background属性中：

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

这给了我们这个：

实施例

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>

Answer 2

尝试使用背景位置属性

例如 在你的情况下

background-position: center left;

我也修改了左边的填充。这是小提琴。

http://jsfiddle.net/8190zjvf/9/

这里我将列表左边的填充更改为20 px; 为了在左边打勾，我使用了background-position属性。希望很清楚。