添加tick选定的CSS

Question

.showcase-components-colorlist color {
  border: 2px solid transparent;
  margin: 1px;
  padding: 2px;
  border-radius: 50%;
  cursor: pointer;
}

<div class="showcase-components-colorlist color showcase-components-colorlist color-- active">
  <svg width="40" height="40">
    <circle cx="20" cy="20" r="19" fill="#c5145d" stroke="#fff" stroke-width="1"></circle>
  </svg>
</div>
<div class="showcase-components-colorlist color">
  <svg width="40" height="40">
    <circle cx="20" cy="20" r="19" fill="#db2586" stroke="#fff" stroke-width="1"></circle>
  </svg>
</div>

如何在上面的代码生成的一个圆圈中添加复选标记。

Answer 1

一种方法是通过伪内容。您需要给出您将伪内容设置为相对容器的元素。然后，您可以创建伪内容（在这种情况下为复选标记）。定位将相对于父元素的尺寸。

.showcase-components-colorlist {
  border: 2px solid transparent;
  margin: 1px;
  padding: 2px;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
}

.showcase-components-colorlist.selected::before {
  content: '✅';
  position: absolute;
  left: 11px;
  top: 9px;
}

<div class="showcase-components-colorlist color showcase-components-colorlist color-- active">
  <svg width="40" height="40"><circle cx="20" cy="20" r="19" fill="#c5145d" stroke="#fff" stroke-width="1">
    </circle>
  </svg>
</div>
<div class="showcase-components-colorlist selected">
  <svg width="40" height="40">
    <circle cx="20" cy="20" r="19" fill="#db2586" stroke="#fff" stroke-width="1"></circle>
  </svg>
</div>

Answer 2

创建自己的＆lt; svg-option＆gt;本机JavaScript Web组件。

<svg-option></svg-option>
<svg-option fill="red" selected></svg-option>
<svg-option fill="rebeccapurple" selected-fill="yellow" selected></svg-option>

创建：

<script>
customElements.define("svg-option",class extends HTMLElement{
  connectedCallback(){
    this.style.display = "inline-block";
    this.innerHTML=`<svg viewBox="0 0 50 50">
                      <circle cx="50%" cy="50%" r="49%" fill="${this.getAttribute("fill") || "green"}"/>
                      <circle cx="50%" cy="50%" r="30%" fill="${this.getAttribute("selected-fill") || "beige"}" visibility="hidden"/>
                    </svg>`;
    this.select();
    this.onclick = (evt) => this.toggle();
  }
  select(state = this.hasAttribute("selected")) {
    this.querySelector("circle:nth-child(2)").setAttribute("visibility" , state ? "visible" :"hidden");
  }
  toggle(){
    this.select( this.toggleAttribute("selected") );
  }
})
</script>

<style>
  svg-option {
    --svg-option-size:180px;
    width: var(--svg-option-size);
    height: var(--svg-option-size);
    cursor: pointer;
  }
  svg-option[selected]{
    background:lightgreen;
  }
  svg-option:not([selected]){
    background:pink;
  }
</style>

<svg-option></svg-option>
<svg-option fill="red" selected></svg-option>
<svg-option fill="rebeccapurple" selected-fill="yellow" selected></svg-option>