Just curious, because I just realized it wasn\'t an actual \"x\" (annoying how long that took to figure out).
Noticed ❎ that looks nice, but display in green only into Firefox.
A possible workaround to adjust that is to use css filters.
Inspect the element to get the filter values.
adjustHUE.addEventListener("input", (e) => {
document.querySelector("#close").style.cssText += "filter:hue-rotate(" + e.target.value + "deg) brightness(" + adjustBRIGHTNESS.value + ")"
})
adjustBRIGHTNESS.addEventListener("input", (e) => {
document.querySelector("#close").style.cssText += "filter:hue-rotate(" + adjustHUE.value + "deg) brightness(" + e.target.value + ")"
})
#close {
font-size: 6rem;
padding: 0 2rem
}
<div id="close" style="filter:hue-rotate(0deg)">❎</div>
Hue:<br>
<input id="adjustHUE" type="range" min="0" max="360" value="0"><br>
Brightness:<br>
<input id="adjustBRIGHTNESS" type="range" min="0.2" max="1" step="0.01" value="1"><br>
<div id="out"></div>
From css, this may look like:
span {
font-size: 2rem;
z-index: 2;
filter: hue-rotate(277deg) brightness(0.96);
float: right;
cursor:pointer
}
<span>❎</span>