Question

首先，请不要将其标记为重复，因为我想对这个QnA here进行一些修改。我正在使用此answer来实现我想要的功能，但是它几乎可以满足我的需求。这是他的demo。

我正在努力实现他所做的一切，this是我到目前为止所做的。但是，当我单击图像时，由于边框的缘故，这会使图像有些变大。我想要的是，当选中图像（复选框）时，左上角有复选框图标（完成），并且图像周围带有边框，而不会使图像变大。这是我的代码段中的代码：

这是HTML：

<ul>
  <li><input type="checkbox" id="cb1" />
    <label for="cb1"><img src="http://lorempixel.com/103/103" /></label>
  </li>
  <li><input type="checkbox" id="cb2" />
    <label for="cb2"><img src="http://lorempixel.com/102/102" /></label>
  </li>
</ul>

这是CSS：

ul {
  list-style-type: none;
}    
li {
  display: inline-block;
}    
input[type="checkbox"][id^="cb"] {
  display: none;
}    
label {
  display: block;
  position: relative;
  cursor: pointer;
  width: 100%;
  height: 100%;
}    
label:before {
  background-color: red;
  color: white;
  display: block;
  border: 1px solid red;
  position: absolute;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  transition-duration: 0.4s;
  -webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  -ms-transition-duration: 0.4s;
}    
label img {
  height: 100%;
  width: 100%;
}    
:checked + label {
  border-color: red;
}    
:checked + label:before {
  content: "✓";
  background-color: red;
  border: 1px solid red;
  z-index: 99;
}    
:checked + label img {
  z-index: -1;
  border: 1px solid red;
}

谢谢！

Answer 1

为透明的img添加边框

label img {
  height: 100%;
  width: 100%;
  border: 1px solid transparent;
}

https://codepen.io/anon/pen/PVRxRM

Answer 2

因此，如果需要单击图像时，则需要在图像的左上角显示✓，并且还希望在图像周围显示一些边框，那么您所做的绝对正确。 / p>

如果您担心图像移动n像素，请记住border占用一些空间，而outline则不需要任何空间。 Outline将n像素置于对象周围，并应用边框类型效果。

所以有2种解决方法-

@lalji上面建议的内容。当您加载页面时，在图像上以transparent的颜色应用边框，这样它将为边框保留空间，实际上您不会在边框周围看到任何边框，单击（选择图像）只需更改边框的颜色。

Fiddle for border transparent

label img {
  height: 100%;
  width: 100%;
  border: 1px solid transparent;
}

另一个将是单击时应用轮廓而不是边框。

Fiddle for outline

:checked + label img {
  z-index: -1;
  outline: 1px solid red;
}

UPADTE （如果要在选择图片时也显示一些图片/文字）。如果您在这里看到，我添加了另一个节点details，该节点仅在选择图像时显示，并在图像中心对齐。

Fiddle

此css下方的规则用于首先隐藏详细信息，并将其置于中心等位置。

label img + .details
{
  color:white;
  position:absolute;
  top:0px; 
  width:100%;  
  display:none;
  margin-top:50%;
  transform: translatey(-50%);
  text-align:center;
}

现在，如果选择了图像，我们将显示details部分。

:checked + label img + .details
{
  display:block;
}

Answer 3

我给li设置了固定的高度和宽度，当选中此复选框时，我正在更改图像的高度和宽度并将其居中对齐。希望这是您想要的。谢谢。

ul {
  list-style-type: none;
}

li {
  display: inline-block;
}

input[type="checkbox"][id^="cb"] {
  display: none;
}

label {
    display: block;
    position: relative;
    cursor: pointer;
    height: 120px;
    border: 1px solid;
    width: 120px;
}

label:before {
  background-color: red;
  color: white;
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  transition-duration: 0.4s;
}

label img {
  height: 100%;
  width: 100%;
}

:checked + label {
  border-color: red;
}

:checked + label:before {
  content: "✓";
  background-color: red;
  border: 1px solid red;
  z-index: 99;
}

:checked + label img {
  z-index: -1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100px;
    width: 100px;
}

<ul>
  <li><input type="checkbox" id="cb1" />
    <label for="cb1"><img src="http://lorempixel.com/100/100" /></label>
  </li>
  <li><input type="checkbox" id="cb2" />
    <label for="cb2"><img src="http://lorempixel.com/101/101" /></label>
  </li>
  <li><input type="checkbox" id="cb3" />
    <label for="cb3"><img src="http://lorempixel.com/102/102" /></label>
  </li>
  <li><input type="checkbox" id="cb4" />
    <label for="cb4"><img src="http://lorempixel.com/103/103" /></label>
  </li>
</ul>

Answer 4

尝试一下：

ul {
  list-style-type: none;
}
li {
  display: inline-block;
}
input[type="checkbox"][id^="cb"] {
  display: none;
}
label {
    border: 1px solid #fff;
  display: block;
  position: relative;
  cursor: pointer;
}
label:before {
  background-color: red;
  color: white;
  content: "";
  display: block;
  border: 1px solid red;
  position: absolute;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  transition-duration: 0.4s;
  transform: scale(0);
}
label img {
  height: 100%;
  width: 100%;
  transition-duration: 0.2s;
  transform-origin: 50% 50%;
}
:checked + label {
  border-color: red;
}
:checked + label:before {
  content: "✓";
  background-color: red;
  z-index: 99;
  transform: scale(1);
}
:checked + label img {
  z-index: -1;
  transform: scale(0.9);
}

<ul>
  <li><input type="checkbox" id="cb1" />
    <label for="cb1"><img src="http://lorempixel.com/103/103" /></label>
  </li>
  <li><input type="checkbox" id="cb2" />
    <label for="cb2"><img src="http://lorempixel.com/102/102" /></label>
  </li>
</ul>

使用图像进行复选框输入

4 个答案: