<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>.white { background: #f4cd8d; }
.black { background: #746864; }
body {
margin: 0;
display: flex
}
div {
display: grid;
grid-template-columns: repeat(8, 30px);
overflow: hidden;
}
input {
display: none;
}
label {
width: 30px;
height: 30px;
background: #f4cd8d;
display: block;
position: relative;
}
input[type="radio"]:checked + label {
background: #FF0000;
box-shadow: -30px -60px 0 0 #0000FF, -60px -30px 0 0 #0000FF, 30px -60px 0 0 #0000FF, 60px -30px 0 0 #0000FF, -30px 60px 0 0 #0000FF, -60px 30px 0 0 #0000FF, 30px 60px 0 0 #0000FF, 60px 30px 0 0 #0000FF;
z-index: 100;
position: relative;
}
</style>
</head>
<body>
<div>
<input type="radio" name="tag" id="a1">
<label class="white a1" for="a1"></label>
<input type="radio" name="tag" id="b1">
<label class="black b1" for="b1"></label>
<input type="radio" name="tag" id="c1">
<label class="white c1" for="c1"></label>
<input type="radio" name="tag" id="d1">
<label class="black d1" for="d1"></label>
<input type="radio" name="tag" id="e1">
<label class="white e1" for="e1"></label>
<input type="radio" name="tag" id="f1">
<label class="black f1" for="f1"></label>
<input type="radio" name="tag" id="g1">
<label class="white g1" for="g1"></label>
<input type="radio" name="tag" id="h1">
<label class="black h1" for="h1"></label>
<input type="radio" name="tag" id="a2">
<label class="black a2" for="a2"></label>
<input type="radio" name="tag" id="b2">
<label class="white b2" for="b2"></label>
<input type="radio" name="tag" id="c2">
<label class="black c2" for="c2"></label>
<input type="radio" name="tag" id="d2">
<label class="white d2" for="d2"></label>
<input type="radio" name="tag" id="e2">
<label class="black e2" for="e2"></label>
<input type="radio" name="tag" id="f2">
<label class="white f2" for="f2"></label>
<input type="radio" name="tag" id="g2">
<label class="black g2" for="g2"></label>
<input type="radio" name="tag" id="h2">
<label class="white h2" for="h2"></label>
<input type="radio" name="tag" id="a3">
<label class="white a3" for="a3"></label>
<input type="radio" name="tag" id="b3">
<label class="black b3" for="b3"></label>
<input type="radio" name="tag" id="c3">
<label class="white c3" for="c3"></label>
<input type="radio" name="tag" id="d3">
<label class="black d3" for="d3"></label>
<input type="radio" name="tag" id="e3">
<label class="white e3" for="e3"></label>
<input type="radio" name="tag" id="f3">
<label class="black f3" for="f3"></label>
<input type="radio" name="tag" id="g3">
<label class="white g3" for="g3"></label>
<input type="radio" name="tag" id="h3">
<label class="black h3" for="h3"></label>
<input type="radio" name="tag" id="a4">
<label class="black a4" for="a4"></label>
<input type="radio" name="tag" id="b4">
<label class="white b4" for="b4"></label>
<input type="radio" name="tag" id="c4">
<label class="black c4" for="c4"></label>
<input type="radio" name="tag" id="d4">
<label class="white d4" for="d4"></label>
<input type="radio" name="tag" id="e4">
<label class="black e4" for="e4"></label>
<input type="radio" name="tag" id="f4">
<label class="white f4" for="f4"></label>
<input type="radio" name="tag" id="g4">
<label class="black g4" for="g4"></label>
<input type="radio" name="tag" id="h4">
<label class="white h4" for="h4"></label>
<input type="radio" name="tag" id="a5">
<label class="white a5" for="a5"></label>
<input type="radio" name="tag" id="b5">
<label class="black b5" for="b5"></label>
<input type="radio" name="tag" id="c5">
<label class="white c5" for="c5"></label>
<input type="radio" name="tag" id="d5">
<label class="black d5" for="d5"></label>
<input type="radio" name="tag" id="e5">
<label class="white e5" for="e5"></label>
<input type="radio" name="tag" id="f5">
<label class="black f5" for="f5"></label>
<input type="radio" name="tag" id="g5">
<label class="white g5" for="g5"></label>
<input type="radio" name="tag" id="h5">
<label class="black h5" for="h5"></label>
<input type="radio" name="tag" id="a6">
<label class="black a6" for="a6"></label>
<input type="radio" name="tag" id="b6">
<label class="white b6" for="b6"></label>
<input type="radio" name="tag" id="c6">
<label class="black c6" for="c6"></label>
<input type="radio" name="tag" id="d6">
<label class="white d6" for="d6"></label>
<input type="radio" name="tag" id="e6">
<label class="black e6" for="e6"></label>
<input type="radio" name="tag" id="f6">
<label class="white f6" for="f6"></label>
<input type="radio" name="tag" id="g6">
<label class="black g6" for="g6"></label>
<input type="radio" name="tag" id="h6">
<label class="white h6" for="h6"></label>
<input type="radio" name="tag" id="a7">
<label class="white a7" for="a7"></label>
<input type="radio" name="tag" id="b7">
<label class="black b7" for="b7"></label>
<input type="radio" name="tag" id="c7">
<label class="white c7" for="c7"></label>
<input type="radio" name="tag" id="d7">
<label class="black d7" for="d7"></label>
<input type="radio" name="tag" id="e7">
<label class="white e7" for="e7"></label>
<input type="radio" name="tag" id="f7">
<label class="black f7" for="f7"></label>
<input type="radio" name="tag" id="g7">
<label class="white g7" for="g7"></label>
<input type="radio" name="tag" id="h7">
<label class="black h7" for="h7"></label>
<input type="radio" name="tag" id="a8">
<label class="black a8" for="a8"></label>
<input type="radio" name="tag" id="b8">
<label class="white b8" for="b8"></label>
<input type="radio" name="tag" id="c8">
<label class="black c8" for="c8"></label>
<input type="radio" name="tag" id="d8">
<label class="white d8" for="d8"></label>
<input type="radio" name="tag" id="e8">
<label class="black e8" for="e8"></label>
<input type="radio" name="tag" id="f8">
<label class="white f8" for="f8"></label>
<input type="radio" name="tag" id="g8">
<label class="black g8" for="g8"></label>
<input type="radio" name="tag" id="h8">
<label class="white h8" for="h8"></label>
</div>
<div class="right"></div>
<div class="bottom"></div>
</body>
</html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.