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) ~ #a22:not(:checked):not(:indeterminate) ~ #a31:not(:checked):not(:indeterminate) ~ p:after{ content: 'O won'; color:blue; }
<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>
var checkboxes = document.getElementsByTagName('input'); for(var i=0; i<checkboxes.length; i++) { checkboxes[i].indeterminate = true; }