Question

当用户单击图像时，我试图在图像顶部显示刻度线。我有一个输入单选按钮元素，并且标签都包裹在锚元素中，并且在标签中有一个图像元素，并且我使用CSS来应用刻度线。每当我单击图像时，什么都不会发生。请我将不胜感激，如果有人可以帮助。这是片段

.icon {
    margin: 5px 0;
}

.icon input {
    display: none;
}

.icon img {
    vertical-align: middle;
    width: 50%;
    border: 2px solid greenyellow;
}

.icon input:checked {
    background: rgba(0,0,0,0.5);
}

.icon input:checked::after{
    content: '✔';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    transform: translate(-50%, -50%);
    color: black;
    font-size: 20px;
    text-align: center;
    border: 1px solid black;
    border-radius: 50%;
}

<div class="row">
    <a href="#" class="col-sm-4 icon">
        <input type="radio" name="selimg" id="selimg1">
        <label for="selimg1">
            <img src="./images/baby-bottle.png">
        </label> 
    </a>
    <a href="#" class="col-sm-4 icon">
        <input type="radio" name="selimg" id="selimg2">
        <label for="selimg2">
            <img src="./images/badge.png">
        </label>
    </a>
    <a href="#" class="col-sm-4 icon">
        <img src="./images/cardiologist.png">
    </a>
</div>

Answer 1

::before和::after仅适用于容器元素，因此不能在输入中使用它。

尝试使用.icon input:checked::after代替.icon input:checked + label::before。

（其余的CSS需要进行调整，以使其显示所需的样式，但这至少将使其显示，您可以将其移动到需要的位置）

.icon {
  margin: 5px 0;
}

.icon input {
  display: none;
}

.icon img {
  vertical-align: middle;
  width: 50%;
  border: 2px solid greenyellow;
}

.icon input:checked {
  background: rgba(0, 0, 0, 0.5);
}

.icon input:checked + label::before {
  content: '✔';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -50%);
  color: black;
  font-size: 20px;
  text-align: center;
  border: 1px solid black;
  border-radius: 50%;
}

<div class="row">
  <a href="#" class="col-sm-4 icon">
    <input type="radio" name="selimg" id="selimg1">
    <label for="selimg1">
      <img src="./images/baby-bottle.png">
    </label>
  </a>
  <a href="#" class="col-sm-4 icon">
    <input type="radio" name="selimg" id="selimg2">
    <label for="selimg2">
      <img src="./images/badge.png">
    </label>
  </a>
  <a href="#" class="col-sm-4 icon">
    <img src="./images/cardiologist.png">
  </a>
</div>

单击图像时无法在图像上显示刻度线？

1 个答案: