Add a tick selected css-CodePudding

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

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

How to add a check mark to one of the circles as generated by the code above.

CodePudding user response：

One way to do this is through pseudo content. You need to give the element which you'll set the pseudo content a relative container. Then, you create your pseudo content (in this case, a check mark). The positioning will be relative to the parent element's dimensions.

.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 >
  <svg width="40" height="40"><circle cx="20" cy="20" r="19" fill="#c5145d" stroke="#fff" stroke-width="1">
    </circle>
  </svg>
</div>
<div >
  <svg width="40" height="40">
    <circle cx="20" cy="20" r="19" fill="#db2586" stroke="#fff" stroke-width="1"></circle>
  </svg>
</div>

CodePudding user response：

Create your own <svg-option> Native JavaScript Web Component.

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

creates:

<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>