css - 将勾选应用于超出边界的复选框

Question

当复选框被选中时，我们想要应用一个勾号它会超出复选框区域。应用背景图像不起作用，因为它不能超出复选框区域。

因此，我想到了创建嵌套跨度并将背景图像应用于外部跨度。但是，刻度图像被内部跨度隐藏了。

Quick jsfiddle(不显示图片)是here

<span class="outer">
  <span class="inner">
  </span>
</span>

span.inner{
  display:inline-block;
  width:10px;
  height:10px;
  border:1px solid;
  background-color:yellow;
}

span.outer{
  display:inline-block;
  width:20px;
  height:20px;
  border:1px solid red;
  box-sizing:border-box;
  padding-left:3px;
  padding-top:1px;
  background-color:orange;
  background-image:url('sometickimage.png');
}

基本上，tick 被黄色背景的 span 隐藏了。

没有绝对定位有没有办法实现这个？

Answer 1

尝试这样的事情:

<input type="checkbox" id="checkbox69" class="css-checkbox lrg" checked="checked">
<label for="checkbox69" name="checkbox69_lbl" class="css-label lrg out"> A tick which is going out of the checkbox </label>

与 CSS 相关联:

label {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

input[type=checkbox].css-checkbox {
  position: absolute; 
overflow: hidden; 
clip: rect(0 0 0 0); 
height:1px; 
width:1px; 
margin:-1px; 
padding:0;
border:0;
}

input[type=checkbox].css-checkbox + label.css-label {
padding-left:20px;
height:15px; 
display:inline-block;
line-height:15px;
background-repeat:no-repeat;
background-position: 0 0;
font-size:15px;
vertical-align:middle;
cursor:pointer;
}

input[type=checkbox].css-checkbox:checked + label.css-label {
background-position: 0 -15px;
}

.css-label{
background-image:url(http://csscheckbox.com/checkboxes/dark-check-      green.png);
}

.vlad{background-image:url(http://csscheckbox.com/checkboxes/vlad.png);}



input[type=checkbox].css-checkbox.sme:checked + label.css-label.sme{

 background-position: 0 -16px;
}
input[type=checkbox].css-checkbox.lrg + label.css-label.lrg {
padding-left:22px;
height:20px; 
display:inline-block;
line-height:20px;
background-repeat:no-repeat;
background-position: 0 0;
font-size:15px;
vertical-align:middle;
cursor:pointer;
}

input[type=checkbox].css-checkbox.lrg:checked + label.css-label.lrg{

background-position: 0 -20px;
}