CSS3 - 标签和复选框

Question

HTML

 <div class="select">
      <div>
        <label for="kitty" class="kitty-label kitty-label-1 l-center">
        </label>
        <input type="checkbox" name="cats" value="1">
        <label>Kitty One</label>
      </div>
      <div class="cly-pam" style="width:50%; float: left">
        <label for="kitty" class="kitty-label kitty-label-2 l-center">
        </label>
        <input type="checkbox" name="cats" value="2">
        <label>Kitty Two</label>
      </div>
    </div>
    <div>

css

label{
  cursor: pointer;
}

    .kitty-label{
      position: relative;
      width: 100%;
      &:hover,
      &:focus,
      &:active{
        border-radius: 6px solid #fff;
      }
    }
    .kitty-label-1{
          display: inline-block;
          background: url(../img/kitty1.png) no-repeat 0 0;
          height: 142px;
          width: 142px;
    }

    .kitty-label-2{
          display: inline-block;
          background: url(../img/kitty2.png) no-repeat 0 0;
          height: 144px;
          width: 144px;
    }

    .select input[type="checkbox"]{
      display: none;
      &:checked + label:before{
        background: url(../img/tick.png) no-repeat;
      }
    }

标签会有背景图片，但问题是当焦点、活动或悬停时，边框半径不会出现在图片后面。小猫图像也没有边界半径边缘。想知道是否应该有圆形图像或css3可以做到这一点？

复选框似乎也没有显示勾号或任何东西。试图点击标签（如小猫图片），勾号没有出现？

不知道哪里会出错。帮助将不胜感激。

更新

<div>
    <input type="radio" name="type" value="designer" id="designer">
    <label for="designer" id="designer" class="inline-block testsign" style="background: url(../img/face.png) no-repeat center;">
    </label></div>

CSS

.testsign{
  width: 170px;
  height: 170px;
  border-radius: 100%;
  &:hover,
  &:focus,
  &:active{
     border: 15px solid #f3f3f3;

  }
}

// [type="radio"]:not(:checked),
// [type="radio"]:checked {
//   visibility: hidden;

input[type="radio"]:checked + label:after {
    content:"";
    display: block;
    position: absolute;
    height: 60px;
    width: 60px;
    background: #f0f1f1 url(../img/tick.png) no-repeat center center;
    border-radius: 100%;
    border: 10px solid #fff;
}

尝试来自@misterMan 的示例

无法获取标签：在右下方定位后 - 尝试顶部和左侧放置勾选圆圈，但问题是当检查时，它将出现在左侧和左后方的位置。因此，如果检查额外的元素或图像，勾选圆圈将出现在不正确的同一位置。移除顶部和左侧。只要检查无线电，就无法在每个标签中出现右下方的刻度圈？

另外一个问题是，当标签上的边框半径悬停在背景图像上时，如果选中单选，则会出现刻度圈（label：after），只要将鼠标悬停在标签上，刻度圈就会“跳跃”。如何停止跳跃？我试图添加绝对中心和相对位置，但标签将不在容器中。

我们将不胜感激帮助或见解。

Answer 1

我喜欢这种类型的东西，所以我为你做了这个，如果你还在寻找解决方案。我添加了带有<img> 的图像，因为它们不是装饰，它们是主要内容:)

它既好又简单，我认为可以满足您的需求。让我知道！

更新

Have an updated fiddle!

HTML

<form>
    <input type="checkbox" id="pic1" />
    <label for="pic1">
        <img src="http://www.placehold.it/200" />
    </label>

    <input type="checkbox" id="pic2" />
    <label for="pic2">
        <img src="http://www.placehold.it/200" />
    </label>
</form>

CSS

body {
    margin: 0;
}
input[type=checkbox] {
    display: none;
}
label {
    position: relative;
    display: block;
    width: 200px;
    cursor: pointer;
    float: left;
    margin: 10px 0 10px 10px;
}
input[type=checkbox] + label img:hover {
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}
input[type=checkbox]:checked + label img {
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
}
input[type=checkbox]:checked + label img:hover {
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}
input[type=checkbox]:checked + label:after {
    content:"";
    display: block;
    position: absolute;
    bottom: 10px;
    right: 10px;
    height: 50px;
    width: 50px;
    background: url(http://i.imgur.com/i7379jf.png) no-repeat right bottom;
    background-size: 50px;
}
input[type=checkbox]:checked + label:hover:after {


}