CSS-only Tic Tac Toe

by leaverou

HTML

<input type="checkbox" id="a11" /><label for="a11">Top left</label>
<input type="checkbox" id="a12" /><label for="a12">Top center</label>
<input type="checkbox" id="a13" /><label for="a13">Top right</label>

<input type="checkbox" id="a21" /><label for="a21">Middle left</label>
<input type="checkbox" id="a22" /><label for="a22">Middle center</label>
<input type="checkbox" id="a23" /><label for="a23">Middle right</label>

<input type="checkbox" id="a31" /><label for="a31">Bottom left</label>
<input type="checkbox" id="a32" /><label for="a32">Bottom center</label>
<input type="checkbox" id="a33" /><label for="a33">Bottom right</label>

<p>State: </p>

CSS

input {
    position:absolute;
    clip: rect(0,0,0,0);
}

label {
    display:block;
    width:30px;
    height:50px;
    padding:10px 20px;
    outline:1px solid #bbb;
    background:white;
    float:left;
    color:transparent;
    font-size:50px;
    line-height:1;
    overflow:hidden;
}

input:focus + label {
    background:#ffd;
}

label:nth-of-type(3n + 1) {
    clear:left
}

label:before {
    color:black;
}

input:checked + label:before {
    content: '×';
    color: green;
}

input:not(:checked) + label:before {
    content: '○';
    color: blue;
}

input:indeterminate + label:before {
    content: ' ';
}

p {
    clear:both;
    padding:10px 0;
    font:150% sans-serif;
}

p:after {
    content: 'Tie';
    font-weight:bold;
}

input:indeterminate + label ~ p:after {
    content: 'Still playing';
}

input:nth-of-type(3n+1):checked + label + input:checked + label + input:checked ~ p:after,
#a11:checked ~ #a21:checked ~ #a31:checked ~ p:after,
#a12:checked ~ #a22:checked ~ #a32:checked ~ p:after,
#a13:checked ~ #a23:checked ~ #a33:checked ~ p:after,
#a11:checked ~ #a22:checked ~ #a33:checked ~ p:after,
#a13:checked ~ #a22:checked ~ #a31:checked ~ p:after {
    content: 'X won';
    color:green;
}

input:nth-of-type(3n+1):not(:checked):not(:indeterminate) + label + input:not(:checked):not(:indeterminate) + label + input:not(:checked):not(:indeterminate) ~ p:after,
#a11:not(:checked):not(:indeterminate) ~ #a21:not(:checked):not(:indeterminate) ~ #a31:not(:checked):not(:indeterminate) ~ p:after,
#a12:not(:checked):not(:indeterminate) ~ #a22:not(:checked):not(:indeterminate) ~ #a32:not(:checked):not(:indeterminate) ~ p:after,
#a13:not(:checked):not(:indeterminate) ~ #a23:not(:checked):not(:indeterminate) ~ #a33:not(:checked):not(:indeterminate) ~ p:after,
#a11:not(:checked):not(:indeterminate) ~ #a22:not(:checked):not(:indeterminate) ~ #a33:not(:checked):not(:indeterminate) ~ p:after,
#a13:not(:checked):not(:indeterminate) ~...

JavaScript

var checkboxes = document.getElementsByTagName('input');
for(var i=0; i<checkboxes.length; i++) {
    checkboxes[i].indeterminate = true;
}