html - 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;
      }
    }

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

复选框似乎也没有显示勾号或任何东西。试图点击标签(如 kitty 图像中所示)，勾号没有出现？

不确定我可能哪里出错了。帮助将不胜感激。

已更新

<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 的例子

Couldn't get the label:after to be positioned at the right bottom - tryed top and left to position the tick circle, 但问题是当选中时，它会出现在 top 和 left 之后的位置。因此，如果检查额外的元素或图像，刻度圈将出现在不正确的相同位置。移除顶部和左侧。每当选中 radio 时，无法在每个标签中出现位于右下角的刻度圈？

还有一个问题是，当标签上的边框半径悬停在背景图像上时，如果选中radio，则会出现刻度圈(标签:之后)，每当悬停在标签上时，刻度圈都会“跳动”。如何停止跳跃？我试图添加绝对中心和相对位置，但标签将超出容器。

帮助或见解将不胜感激。

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 {


}