Question

enter image description here

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

尝试了这个例子

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

另一个问题是，当标签上的边框半径悬停在背景图像上时，如果选中了收音机，则会出现刻度线圆圈（标签：后面），刻度线圈将是＆＃34;跳跃＆＃34;每当徘徊在标签上。怎么停止跳？我试图添加绝对中心和位置相对但标签将不在容器中。

我们将不胜感激。

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 {


}

CSS3 - 标签和复选框

1 个答案: