G. Man G. Man - 17 days ago 7
PHP Question

How do I make these buttons stay activated after clicking on them?

I have this little program (startscreen) and the buttons you see are working like radio buttons, but what I'm trying to do is to make them stay activated when you have clicked them, like the :active tag in css, but it should also be deactivated when another button is clicked..
I cannot figure out how to do this.

I've gotten all of my important coding in this JSFiddle:
https://jsfiddle.net/za49s56j/

CSS coding:

input[type="radio"] {
display:none;
}

input[type="submit"] {
display:none;
}


html {
height: 100%;
background: white;
background: radial-gradient(circle, #fff 20%, #ccc);
background-size: cover;
margin: 0;
padding: 0;
box-sizing: border-box;
font: bold 14px Arial, sans-serif;
}

.center {
margin: auto;
width: 200px;
}

.centerstart {
margin: auto;
width: 120px;
}

.keys span{
float: left;
position: relative;
margin: 0 7px 11px 0;
cursor: pointer;
width: 80px;
height: auto;

background: rgba(0, 0, 0, 0.1);
border-radius: 3px;
box-shadow: 0px 4px rgba(0, 0, 0, 0.2);

color: #000;
line-height: 30px;
text-align: center;
user-select: none;

}

.keys span:hover {
background: rgba(0, 0, 0, 0.3);
box-shadow: 0px 4px (0, 0, 0, 0.1);
color: white;
}

.keys span:active {
box-shadow: 0px 0px #6b54d3;
top: 4px;
}

input[type=radio]:checked {
box-shadow: 0px 0px #6b54d3;
top: 4px;
}


And the HTML coding:

<body>

<form method="post" action="startgetallenactie.php">
Dit is een oefenspel voor het oefenen van hexadecimale getallen. Kies een moeilijkheidsgraad en opgave: <BR>
(alle hexadecimale waarden moeten met een hoofdletter gegeven worden!) <BR><BR>
<div class="keys" ><div class="center">
<input type="radio" name="moeilijkheidsgraad" value="makkelijk" id="makkelijk" checked> <label for="makkelijk"><span>makkelijk</span></label>
<input type="radio" name="moeilijkheidsgraad" value="moeilijk" id="moeilijk"> <label for="moeilijk"><span>makkelijk</span></label> <BR><BR><BR><BR>

<input type="radio" name="waarde" value="dechex" id="dechex" checked> <label for="dechex"><span>dec-hex</span></label>
<input type="radio" name="waarde" value="hexdec" id="hexdec"> <label for="hexdec"><span>hex-dec</span></label> <BR><BR><BR>
<input type="radio" name="waarde" value="decbin" id="decbin"> <label for="decbin"><span>dec-bin</span></label>
<input type="radio" name="waarde" value="bindec" id="bindec"> <label for="bindec"><span>bin-dec</span></label> <BR><BR><BR>
<input type="radio" name="waarde" value="hexbin" id="hexbin"> <label for="hexbin"><span>hex-bin</span></label>
<input type="radio" name="waarde" value="binhex" id="binhex"> <label for="binhex"><span>bin-hex</span></label>
</div>
<BR><BR><BR>
<div class="centerstart">
<input type="submit" value="Start" id="start"> <label for="start"><span>start</span></label>
</div></div>
<BR><BR>

Answer

You can do this with pure CSS like so:

input[type="radio"]:checked + label span {
  box-shadow: 0px 0px #6b54d3;
  top: 4px;
}

Here's a demo http://jsbin.com/tehidaxezi/edit?css,output