复选框图像叠加答案

【问题标题】：Checkbox image overlay复选框图像叠加
【发布时间】：2016-01-11 20:33:12
【问题描述】：

我需要关于仅使用 CSS 的复选框的帮助。

首先它运行正常。但是，我想在单击按钮时将选中的图像覆盖在未选中的图像之上。如何做到这一点？

.gchoice_1_1_3 {border: 1px solid red;}

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

.gchoice_1_1_3 input[type="checkbox"] + label:before {
	background: url('http://www.uswebcompany.com/plugins/gravityforms/wp-content/uploads/2016/01/christmasLights.png') 0 0px no-repeat;
    z-index: 10;
	content: "";
	display: inline-block;
	font-size: 12px;
	height: 75px;
	width: 75px;
	line-height: 16px;
	margin: -2px 6px 0 0;
	text-align: center;
	vertical-align: middle;
	positionL relative;
	border-radius: 10px;
	background-color: #6283B2;
}

.gchoice_1_1_3 input[type="checkbox"]:checked + label:before {
	background: url('http://www.uswebcompany.com/plugins/gravityforms/wp-content/uploads/2016/01/checkmark.png') 0 0px no-repeat;
	height: 75px;
	width: 75px;
	border-radius: 10px;
	background-color: #37924A;
}

<li class='gchoice_1_1_3'>
     <input name='input_1.3' type='checkbox'  value='Christmas Lights'  id='choice_1_1_3' tabindex='22'  />
     <label for='choice_1_1_3' id='label_1_1_3'>Christmas Lights</label>
</li>

【问题讨论】：

positionL relative;...应该是 position: relative;

标签： css forms checkbox

【解决方案1】：

您可以使用多种背景。
但请务必检查浏览器支持和应用背景顺序的问题。

.gchoice_1_1_3 {border: 1px solid red;}

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

.gchoice_1_1_3 input[type="checkbox"] + label:before {
  background: url('http://www.uswebcompany.com/plugins/gravityforms/wp-content/uploads/2016/01/christmasLights.png') 0 0px no-repeat;
  z-index: 10;
  content: "";
  display: inline-block;
  font-size: 12px;
  height: 75px;
  width: 75px;
  line-height: 16px;
  margin: -2px 6px 0 0;
  text-align: center;
  vertical-align: middle;
  position: relative;
  border-radius: 10px;
  background-color: #6283B2;
}

.gchoice_1_1_3 input[type="checkbox"]:checked + label:before {
  background: url('http://www.uswebcompany.com/plugins/gravityforms/wp-content/uploads/2016/01/checkmark.png'), url('http://www.uswebcompany.com/plugins/gravityforms/wp-content/uploads/2016/01/christmasLights.png') 0 0px no-repeat;
  height: 75px;
  width: 75px;
  border-radius: 10px;
  background-color: #37924A;
}

<li class='gchoice_1_1_3'>
  <input name='input_1.3' type='checkbox'  value='Christmas Lights'  id='choice_1_1_3' tabindex='22'  />
  <label for='choice_1_1_3' id='label_1_1_3'>Christmas Lights</label>
</li>

【讨论】：