-1

[1

这里发生的情况是，当我单击特定缩略图时，它上面会出现勾号。它基本上是输入字段的标签。我怎样才能复制这样的东西？我需要的是当我点击一个特定的鞋子缩略图时，它的右上角会出现一个勾号，表示它已被选中。

我从源代码中提取了 HTML 标记。这里使用了 SVG，但我需要将其用作输入字段的标签。这是 HTML 的样子：

<div class="variation">
  <div class="tick_icon">
    <svg class="gl-icon">
      <use xlink:href="#checkmark">
       <symbol id="checkmark" viewBox="0 0 19 19">
         <path fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" d="M2.5 10.5l4 4 10-10">
         </path>
       </symbol>
      </use>
    </svg>
  </div>
  <div class="image_holder" style="background-image: url('url_here.com');">
  </div>
</div>


相同的CSS在这里：

.variation{
 max-width: 70px;
 margin: 0 10px 10px 0;
 display: block;
 position: relative;
 height: 70px;
}
.tick_icon{
 border-radius: 50%;
 background-color: #000;
 position: absolute;
 right: 0;
 width: 24px;
 height: 24px;
 display: flex;
 align-items: center;
 justify-content: center;
}
.gl_icon{
 height: 19px;
 width: 19px;
 display: inline-block;
 color: #fff;
}

我自己的代码（简化）是这样设置的：

<input>
 <label style="border;1px solid black;border-radius:50%">
  <i style="background-image:url('image-url-here');border-radius:50%"></i>
 </label>

所以，本质上，我需要切换我的标签 CSS 以使其看起来像一个勾号。
这是我的输出的样子：

在此处输入图像描述

4

1 回答 1

0 

.wrapper ul li {
  display: inline-block;
  width: 50px;
  height: 50px;
  position: relative;
  background: #ccc;
  margin: auto 5px;
  border-radius: 50%;
}

.wrapper ul li span img {
  width: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.wrapper span i {
  font-size: 16px;
  position: absolute;
  right: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="wrapper">
  <ul>
    <li>
      <span>
                  <i class="fa fa-check-circle"></i>
                </span>
      <span>
                    <img src="https://img.favpng.com/9/17/9/blue-symbol-sphere-logo-png-favpng-ZucUN8smxTCWFbeFNrT4JybTT.jpg">
                </span>
    </li>
    <li>
      <span>
                   <i class="fa fa-check-circle"></i>
                </span>
      <span>
                    <img src="https://img.favpng.com/9/17/9/blue-symbol-sphere-logo-png-favpng-ZucUN8smxTCWFbeFNrT4JybTT.jpg">
                </span>
    </li>
  </ul>
</div>

您好，请检查您是否对此有任何运气，但从下次开始，请提供您的代码段，以便每个人都会更有帮助...

于 2020-02-26T13:28:41.720 回答