getting a checked image when selecting a preset swatch

[ashutosh215]

hi i was wondering if we can get a checked mark on the selected swatch from the preset swatches

[claviska]

You can do this in your stylesheet using the following selector:

.minicolors-swatch.selected {
  /* your checkmark styles here */
}

You may want to take advantage of the ::before or ::after pseudo selector to achieve this.

[ashutosh215]

hey i know its too much to ask but can you please write it for me please. i tried but i failed i want to add a check mark to the selected swatch

[Bhoft]

Try this:

.minicolors-swatch.selected:after {
  content: '';
  display: block;
  width: 5px;
  height: 9px;
  border: solid #000;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-left: 40%;
  margin-top: 20%;
}

[Bhoft]

Or better using the html code instead of painting with css (solution from above). https://www.toptal.com/designers/htmlarrows/symbols/check-mark/

.minicolors-swatch.selected:after {
    content: "\2713";
    color:black;
    position: relative;
    margin: auto 20%;
}