Hi ! I am creating a character sheet for a french game. Magic consists in runes that the player can combine to create a sentence. The player gains access to more and more runes as his character evolves. To complete this, I want to do a magic tab with runes and the CSS trick from the CSS wizard I read : hide the checkbox, and having 2 pictures of each runes. One has normal colors and the other one is grayed. So, with the CSS trick, it would be possible for the player to display a colored or a grayed rune according to the fact he learnt the rune or not. But I can't get it working. I am not an expert at HTML and CSS. Actually, I only know basic ways to do things. Here are the HTML and CSS codes : CSS Code : /* Hide actual checkbox */
input.magie-moi
{
opacity: 0;
width: 260px;
height: 312px;
position: relative;
top: 5px;
left: 6px;
margin: -10px;
cursor: pointer;
z-index: 1;
}
/* Fake checkbox */
input.magie-moi + span::before {
margin-right: 4px;
content: url(<a href="https://nsm09.casimages.com/img/2019/02/04//1902040200106857316107166.jpg" rel="nofollow">https://nsm09.casimages.com/img/2019/02/04//1902040200106857316107166.jpg</a>);
width: 259px;
height: 311px;
}
input.magie-moi:checked + span::before {
content: url(<a href="https://nsm09.casimages.com/img/2019/01/20//1901201222476857316083780.jpg" rel="nofollow">https://nsm09.casimages.com/img/2019/01/20//1901201222476857316083780.jpg</a>);
} HTML code : <input type="checkbox" class="sheet-magie-moi" name="attr_magie_moi" value="1"><span></span> The trick is not working and I only get a regular checkbox.. :( Thx for any help. :)
