112 lines
2.1 KiB
HTML
112 lines
2.1 KiB
HTML
|
<style>
|
||
|
|
.grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(3, 0fr);
|
||
|
|
}
|
||
|
|
|
||
|
|
div > div {
|
||
|
|
padding: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
img {
|
||
|
|
background-color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* HIDE RADIO */
|
||
|
|
#first-layer[type=radio] {
|
||
|
|
position: absolute;
|
||
|
|
opacity: 0;
|
||
|
|
width: 0;
|
||
|
|
height: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* IMAGE STYLES */
|
||
|
|
#first-layer[type=radio] + img {
|
||
|
|
cursor: pointer;
|
||
|
|
padding: 5px;
|
||
|
|
position: absolute;
|
||
|
|
background-color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* CHECKED STYLES */
|
||
|
|
#first-layer[type=radio]:checked + img {
|
||
|
|
z-index: -1000;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* SECOND LAYER BEGINS HERE */
|
||
|
|
|
||
|
|
|
||
|
|
/* HIDE RADIO */
|
||
|
|
#second-layer[type=radio] {
|
||
|
|
position: absolute;
|
||
|
|
opacity: 0;
|
||
|
|
width: 0;
|
||
|
|
height: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* IMAGE STYLES */
|
||
|
|
#second-layer[type=radio] + img {
|
||
|
|
cursor: pointer;
|
||
|
|
padding: 5px;
|
||
|
|
position: absolute;
|
||
|
|
background-color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* CHECKED STYLES */
|
||
|
|
#second-layer[type=radio]:checked + img {
|
||
|
|
z-index: -1000;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* THIRD LAYER BEGINS HERE */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/* HIDE RADIO */
|
||
|
|
#third-layer[type=radio] {
|
||
|
|
position: absolute;
|
||
|
|
opacity: 0;
|
||
|
|
width: 0;
|
||
|
|
height: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* IMAGE STYLES */
|
||
|
|
#third-layer[type=radio] + img {
|
||
|
|
cursor: pointer;
|
||
|
|
padding: 5px;
|
||
|
|
position: absolute;
|
||
|
|
background-color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* CHECKED STYLES */
|
||
|
|
#third-layer[type=radio]:checked + img {
|
||
|
|
z-index: -1000;
|
||
|
|
}
|
||
|
|
|
||
|
|
#root {
|
||
|
|
width: fit-content;
|
||
|
|
/* To adjust the height as well */
|
||
|
|
height: fit-content;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
<body>
|
||
|
|
<div id="root">
|
||
|
|
<form method="POST">
|
||
|
|
<div class='grid'>
|
||
|
|
<label>
|
||
|
|
<input id="first-layer" type="radio" name="captcha" value="0">
|
||
|
|
<img src="images/image0.png"></img>
|
||
|
|
<label>
|
||
|
|
<input id="second-layer" type="radio" name="captcha2" value="1">
|
||
|
|
<img src="images/image1.png"></img>
|
||
|
|
<label>
|
||
|
|
<input id="third-layer" type="radio" name="captcha3" value="2">
|
||
|
|
<img src="images/image2.png"></img>
|
||
|
|
</label>
|
||
|
|
</label>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<input style="position: absolute; top: 300px" type="submit">Submit</input>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</body>
|