-
Aug 2nd, 2017, 08:32 AM
#1
[RESOLVED] CSS Tic-Tac-Toe
I'm trying to create a CSS PvCPU tic-tac-toe with minimal JavaScript. To do this I want to create a custom Checkbox that is visualized by an <svg> tag where checked is X and intermediate is O.
Right now I'm having an issue with toggling the checked <svg> tag. This is the code that I'm using:
Code:
<label>
<input id="00" type="checkbox" />
<!-- hover -->
<svg class="hoverX" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
<rect width="140" height="140" ry="20" style="fill:rgb(255,255,255);stroke-width:10" />
<line x1="20" y1="20" x2="120" y2="120" style="stroke:rgb(220,104,90);stroke-width:10" />
<line x1="20" y1="120" x2="120" y2="20" style="stroke:rgb(220,104,90);stroke-width:10" />
</svg>
<!-- checked -->
<svg class="checkedX" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
<rect width="140" height="140" ry="20" style="fill:rgb(220,104,90);stroke-width:10" />
<line x1="20" y1="20" x2="120" y2="120" style="stroke:rgb(255,255,255);stroke-width:10" />
<line x1="20" y1="120" x2="120" y2="20" style="stroke:rgb(255,255,255);stroke-width:10" />
</svg>
<svg class="checkedO" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
<rect width="140" height="140" ry="20" style="fill:rgb(120,190,197);stroke-width:10" />
<circle cx="70" cy="70" r="70" stroke="rgb(255,255,255)" stroke-width="2" fill="transparent" />
</svg>
</label>
label {
display: inline-block;
vertical-align: middle;
cursor: pointer;
background: #fff;
border: 1px solid #888;
border-radius: 20px;
padding: 0px;
height: 140px;
width: 140px;
}
label input[type="checkbox"] {
display: none;
}
/* unchecked */
label input[type="checkbox"] ~ svg {
display: none;
}
/* hover and checked(X) */
label:hover input[type="checkbox"]:not([disabled]) + svg.hoverX {
display: inline-block;
}
label:hover input[type="checkbox"]:disabled + svg.checkedX {
display: inline-block;
}
/* unchecked(O) */
label input[type="checkbox"]:indeterminate + svg + svg {
display: inline-block;
}
Fiddle: https://codepen.io/anon/pen/VzjbQo
Right now it'll display the hovered X, but as soon as I click on the Checkbox it will no longer display the hovered X on hover nor will it display the checked X. I'm not exactly sure what is causing this.
-
Aug 2nd, 2017, 08:38 AM
#2
Re: [RESOLVED] CSS Tic-Tac-Toe
I figured it out, I was using the + selector instead of the ~ selector in the following styling:
Code:
label:hover input[type="checkbox"]:disabled + svg.checkedX
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|