Skip to content

Instantly share code, notes, and snippets.

@ckhung

ckhung/checkbox-hack.css

Last active October 8, 2023 05:17
Show Gist options
  • Save ckhung/dab2048cb4dcbe90f646dbf8bbd3d3ac to your computer and use it in GitHub Desktop.
Save ckhung/dab2048cb4dcbe90f646dbf8bbd3d3ac to your computer and use it in GitHub Desktop.
Download ZIP
checkbox hack: descendants of "table" sibling
Raw
checkbox-hack.css
body { color: #000; background: #ffd; }
.center { text-indent: 0; text-align: center; }
.right { text-indent: 0; text-align: right; }
/* https://www.geeksforgeeks.org/how-to-create-an-html-checkbox-with-a-clickable-label/ */
input[type=checkbox] { display: none }
.for-checkbox {
background-color: #eec;
/* color: green; */
cursor: pointer;
}
.pos {
text-align: right;
font-size: 0%;
}
#pos-tgl:checked ~ table td.pos ,
#pos-tgl:checked ~ table th.pos {
/* background: #8ff; */
font-size: 100%;
}
#pos-tgl:checked ~ p #lb-pos-tgl { background-color: #fff; }
h1 { text-align: center; }
table {
border-collapse: collapse;
margin-left: 3em;
margin-right: 3em;
}
th { background-color: #eec; }
table.center {
margin: 0 auto;
}
table.center-content th, table.center-content td { text-align: center; }
Raw
checkbox-hack.html
<html>
<head>
<meta charset="UTF-8" />
<link type="text/css" rel="stylesheet" href="checkbox-hack.css" />
<title>tdx7984 "去坐巴士"</title>
</head>
<body>
<h1>光復國中小(柳豐路) @ 台中市</h1>
<!-- https://stackoverflow.com/a/33528185
:target pseudo class is more powerful than the checkbox hack
since it can affect non-sibling -->
<input class="center" type="checkbox" id="pos-tgl" />
<p class="center"><label for="pos-tgl" id="lb-pos-tgl" class="for-checkbox">相對座標</label></p>
<table border="1" class="center">
<tr><th>StnID <th>StopUID <th>下一站 <th class="pos" >x <th class="pos" >y <th>預估 <th>路線 <th>車牌
<tr>
<td>2488</td>
<td>TXG13589</td>
<td>六股(中正路)</td>
<td class="pos" >176</td>
<td class="pos" >-141</td>
<td>9</td>
<td><a href="/bus/rte/Taichung/108">108</a></td>
<td>699-U8</td>
</tr>
<tr>
<td>2488</td>
<td>TXG19371</td>
<td>六股(中正路)</td>
<td class="pos" >176</td>
<td class="pos" >-141</td>
<td>9999</td>
<td><a href="/bus/rte/Taichung/282副">282副</a></td>
<td></td>
</tr>
<tr>
<td>2488</td>
<td>TXG13589</td>
<td>坑口里(光復新村)</td>
<td class="pos" >250</td>
<td class="pos" >298</td>
<td>1</td>
<td><a href="/bus/rte/Taichung/200">200</a></td>
<td>EAL-0351</td>
</tr>
<tr>
<td>2488</td>
<td>TXG13589</td>
<td>坑口里(光復新村)</td>
<td class="pos" >250</td>
<td class="pos" >298</td>
<td>3</td>
<td><a href="/bus/rte/Taichung/17">17</a></td>
<td>KKA-0791</td>
</tr>
<tr>
<td>2488</td>
<td>TXG13589</td>
<td>坑口里(光復新村)</td>
<td class="pos" >219</td>
<td class="pos" >248</td>
<td>11</td>
<td><a href="/bus/rte/Taichung/151">151</a></td>
<td>KKA-6231</td>
</tr>
<tr>
<td>2488</td>
<td>TXG13589</td>
<td>王厝</td>
<td class="pos" >-143</td>
<td class="pos" >87</td>
<td>2</td>
<td><a href="/bus/rte/Taichung/200">200</a></td>
<td>EAL-0370</td>
</tr>
<tr>
<td>2488</td>
<td>TXG13589</td>
<td>王厝</td>
<td class="pos" >-143</td>
<td class="pos" >87</td>
<td>9999</td>
<td><a href="/bus/rte/Taichung/108">108</a></td>
<td></td>
</tr>
<tr>
<td>2488</td>
<td>TXG13589</td>
<td>王厝</td>
<td class="pos" >-143</td>
<td class="pos" >87</td>
<td>9999</td>
<td><a href="/bus/rte/Taichung/151">151</a></td>
<td></td>
</tr>
</table>
<div style="width:20em; margin: 0 auto;">
<p style="display:flex; justify-content: space-between; padding-top: 2em">
<a href="/bus">縣市列表</a>
<span style="font-size: 80%">"去坐巴士" <br /> <a href="https://github.com/g0v/tdx7984">tdx7984@github</a> <br /> by <a href="https://frdm.cyut.edu.tw/~ckhung/">資訊人權貴</a></span>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment