如何解决Html 单选按钮表使单选按钮可在单元格中的任何位置单击
我想让单选按钮占据它们所在的整个单元格 - 而不会影响表格或单元格的大小。 （更容易点击） 我不需要它们具有任何字符串值，只需按钮位置和样式就是我所追求的。 我一直在使用 css 进行测试，这将使它成为方形，但它总是使单选按钮与单元格重叠或使表格改变形状。 如何自定义这些单选按钮？
非常感谢任何帮助或建议。我对此还很陌生，并且已经不知所措。
.st {
border: 1px solid #ddd;
border-collapse: separate;
border-spacing: 2px;
padding: 0px;
}
.st-header_corner {
font-weight: bold;
padding: 0px 2px;
background: none;
border: 1px solid #ddd;
border-bottom: 1px solid #1c1b1b;
border-right: 1px solid #1c1b1b;
}
.st-header_row {
font-weight: bold;
padding: 0px 2px;
background: lighten(#ddd,10%);
border: 1px solid #ddd;
border-right: 1px solid #1c1b1b;
}
.st-header_col {
font-weight: bold;
padding: 0px 2px;
background: lighten(#ddd,10%);
border: 1px solid #ddd;
border-bottom: 1px solid #1c1b1b;
}
.st-cell_basic {
border: 1px solid #ddd;
background: #ffffff;
}
.st-cell_plus {
border: 1px solid darken(#ddd,10%);
background: #ddd;
}
.st-Radio:not([disabled]){
cursor: pointer;
opacity: 1;
}
.st-Radio:not([disabled]):hover {
Box-shadow: 0px 0px 4px green;
outline: 4px solid green;
}
.st-Radio:not([disabled]):checked+span {
display: inline-block;
border-radius: 4px;
background: green;
padding: 0px;
width: 25px;
height: 25px;
}<table class="st">
<thead>
<tr>
<th class="st-header_corner"> / </th>
<th class="st-header_col">30</th>
<th class="st-header_col">31</th>
<th class="st-header_col">32</th>
<th class="st-header_col">33</th>
<th class="st-header_col">34</th>
<th class="st-header_col">35</th>
<th class="st-header_col">36</th>
<th class="st-header_col">38</th>
<th class="st-header_col">40</th>
<th class="st-header_col">42</th>
<th class="st-header_col">44</th>
<th class="st-header_col">46</th>
<th class="st-header_col">48</th>
<th class="st-header_col">50</th>
</tr>
</thead>
<tbody>
<tr>
<td class="st-header_row">30</td>
<td class="st-cell_basic"><label><input id="3030" class="st-Radio" type="radio" name="size" value="3030" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3130" class="st-Radio" type="radio" name="size" value="3130" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3230" class="st-Radio" type="radio" name="size" value="3230" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3330" class="st-Radio" type="radio" name="size" value="3330" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3430" class="st-Radio" type="radio" name="size" value="3430" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3530" class="st-Radio" type="radio" name="size" value="3530" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3630" class="st-Radio" type="radio" name="size" value="3630" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3830" class="st-Radio" type="radio" name="size" value="3830" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="4030" class="st-Radio" type="radio" name="size" value="4030" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="4230" class="st-Radio" type="radio" name="size" value="4230" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="4430" class="st-Radio" type="radio" name="size" value="4430" data-option-position="2"><span></span></label></td>
<td class="st-cell_plus"><label><input id="4630" class="st-Radio" type="radio" name="size" value="4630" data-option-position="2"><span></span></label></td>
<td class="st-cell_plus"><label><input id="4830" class="st-Radio" type="radio" name="size" value="4830" data-option-position="2"><span></span></label></td>
<td class="st-cell_plus"><label><input id="5030" class="st-Radio" type="radio" name="size" value="5030" data-option-position="2"><span></span></label></td>
</tr>
<tr>
<td class="st-header_row">32</td>
<td class="st-cell_basic"><label><input id="3032" class="st-Radio" type="radio" name="size" value="3032" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3132" class="st-Radio" type="radio" name="size" value="3132" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3232" class="st-Radio" type="radio" name="size" value="3232" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3332" class="st-Radio" type="radio" name="size" value="3332" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3432" class="st-Radio" type="radio" name="size" value="3432" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3532" class="st-Radio" type="radio" name="size" value="3532" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3632" class="st-Radio" type="radio" name="size" value="3632" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3832" class="st-Radio" type="radio" name="size" value="3832" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="4032" class="st-Radio" type="radio" name="size" value="4032" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="4232" class="st-Radio" type="radio" name="size" value="4232" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="4432" class="st-Radio" type="radio" name="size" value="4432" data-option-position="2"><span></span></label></td>
<td class="st-cell_plus"><label><input id="4632" class="st-Radio" type="radio" name="size" value="4632" data-option-position="2"><span></span></label></td>
<td class="st-cell_plus"><label><input id="4832" class="st-Radio" type="radio" name="size" value="4832" data-option-position="2"><span></span></label></td>
<td class="st-cell_plus"><label><input id="5032" class="st-Radio" type="radio" name="size" value="5032" data-option-position="2"><span></span></label></td>
</tr>
<tr>
<td class="st-header_row">34</td>
<td class="st-cell_basic"><label><input id="3034" class="st-Radio" type="radio" name="size" value="3034" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3134" class="st-Radio" type="radio" name="size" value="3134" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3234" class="st-Radio" type="radio" name="size" value="3234" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3334" class="st-Radio" type="radio" name="size" value="3334" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3434" class="st-Radio" type="radio" name="size" value="3434" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3534" class="st-Radio" type="radio" name="size" value="3534" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3634" class="st-Radio" type="radio" name="size" value="3634" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3834" class="st-Radio" type="radio" name="size" value="3834" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="4034" class="st-Radio" type="radio" name="size" value="4034" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="4234" class="st-Radio" type="radio" name="size" value="4234" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="4434" class="st-Radio" type="radio" name="size" value="4434" data-option-position="2"><span></span></label></td>
<td class="st-cell_plus"><label><input id="4634" class="st-Radio" type="radio" name="size" value="4634" disabled data-option-position="2"><span></span></label></td>
<td class="st-cell_plus"><label><input id="4834" class="st-Radio" type="radio" name="size" value="4834" disabled data-option-position="2"><span></span></label></td>
<td class="st-cell_plus"><label><input id="5034" class="st-Radio" type="radio" name="size" value="5034" disabled data-option-position="2"><span></span></label></td>
</tr>
<tr>
<td class="st-header_row">36</td>
<td class="st-cell_basic"><label><input id="3036" class="st-Radio" type="radio" name="size" value="3036" disabled data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3136" class="st-Radio" type="radio" name="size" value="3136" disabled data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3236" class="st-Radio" type="radio" name="size" value="3236" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3336" class="st-Radio" type="radio" name="size" value="3336" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3436" class="st-Radio" type="radio" name="size" value="3436" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3536" class="st-Radio" type="radio" name="size" value="3536" disabled data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3636" class="st-Radio" type="radio" name="size" value="3636" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="3836" class="st-Radio" type="radio" name="size" value="3836" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="4036" class="st-Radio" type="radio" name="size" value="4036" data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="4236" class="st-Radio" type="radio" name="size" value="4236" disabled data-option-position="2"><span></span></label></td>
<td class="st-cell_basic"><label><input id="4436" class="st-Radio" type="radio" name="size" value="4436" disabled data-option-position="2"><span></span></label></td>
<td class="st-cell_plus"><label><input id="4636" class="st-Radio" type="radio" name="size" value="4636" disabled data-option-position="2"><span></span></label></td>
<td class="st-cell_plus"><label><input id="4836" class="st-Radio" type="radio" name="size" value="4836" disabled data-option-position="2"><span></span></label></td>
<td class="st-cell_plus"><label><input id="5036" class="st-Radio" type="radio" name="size" value="5036" disabled data-option-position="2"><span></span></label></td>
</tr>
</tbody>
</table>解决方法
修改代码以设置单选按钮的样式。这在很大程度上与 :before 元素有关。我仍然想知道如何将这些无线电盒子中的每一个带到其单元的边缘。
.st {
border-collapse: seperate;
border-spacing: 0.0625em;
padding: 0 auto;
user-select: none;
}
.st-headerC {
background: none;
}
.st-headerH,.st-headerV {
font-size: 18px;
font-weight: normal;
color: white;
background: black;
text-shadow: -1px 0 black,0 1px black,1px 0 black,0 -1px black,1px 1px 2px white;
padding: 0.125em 0.125em;
width: 1.25em;
height: 1.25em;
}
.st-cell_basic {
border: 1px solid black;
background: white;
margin: 0;
}
.st-cell_plus {
border: 1px solid black;
background: lightgray;
margin: 0;
}
input[type="radio"].st-Radio {
-webkit-appearance: none;
width: 1.25em;
height: 1.25em;
border: 1px solid darkgray;
border-radius: 0%;
outline: none;
padding: 0px;
box-shadow: 0 0 5px 0px gray inset;
cursor: pointer;
}
input[type="radio"].st-Radio:hover {
box-shadow: 0 0 5px 0px orange inset;
}
input[type="radio"].st-Radio:before {
content: "";
display: block;
width: 100%;
height: 100%;
margin: 20% auto;
border-radius: 0%;
margin-top: 0px;
}
input[type="radio"].st-Radio:checked:before {
background: lightgreen;
box-shadow: lime 0px 0px 3px 1px;
}<table class="st">
<thead>
<tr>
<th class="st-headerC"> </th>
<th class="st-headerH">30</th>
<th class="st-headerH">31</th>
<th class="st-headerH">32</th>
<th class="st-headerH">33</th>
<th class="st-headerH">34</th>
<th class="st-headerH">35</th>
<th class="st-headerH">36</th>
<th class="st-headerH">38</th>
<th class="st-headerH">40</th>
<th class="st-headerH">42</th>
<th class="st-headerH">44</th>
<th class="st-headerH">46</th>
<th class="st-headerH">48</th>
<th class="st-headerH">50</th>
</tr>
</thead>
<tbody>
<tr>
<th class="st-headerV">30</th>
<td class="st-cell_basic"><label><input id="3030" class="st-Radio" type="radio" name="size" value="3030" data-option-position="2"><label for="3030"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3130" class="st-Radio" type="radio" name="size" value="3130" data-option-position="2"><label for="3130"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3230" class="st-Radio" type="radio" name="size" value="3230" data-option-position="2"><label for="3230"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3330" class="st-Radio" type="radio" name="size" value="3330" data-option-position="2"><label for="3330"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3430" class="st-Radio" type="radio" name="size" value="3430" data-option-position="2"><label for="3430"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3530" class="st-Radio" type="radio" name="size" value="3530" data-option-position="2"><label for="3530"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3630" class="st-Radio" type="radio" name="size" value="3630" data-option-position="2"><label for="3630"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3830" class="st-Radio" type="radio" name="size" value="3830" data-option-position="2"><label for="3830"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="4030" class="st-Radio" type="radio" name="size" value="4030" data-option-position="2"><label for="4030"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="4230" class="st-Radio" type="radio" name="size" value="4230" data-option-position="2"><label for="4230"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="4430" class="st-Radio" type="radio" name="size" value="4430" data-option-position="2"><label for="4430"><span></span></label></label></td>
<td class="st-cell_plus"><label><input id="4630" class="st-Radio" type="radio" name="size" value="4630" data-option-position="2"><label for="4630"><span></span></label></label></td>
<td class="st-cell_plus"><label><input id="4830" class="st-Radio" type="radio" name="size" value="4830" data-option-position="2"><label for="4830"><span></span></label></label></td>
<td class="st-cell_plus"><label><input id="5030" class="st-Radio" type="radio" name="size" value="5030" data-option-position="2"><label for="5030"><span></span></label></label></td>
</tr>
<tr>
<th class="st-headerV">32</th>
<td class="st-cell_basic"><label><input id="3032" class="st-Radio" type="radio" name="size" value="3032" data-option-position="2"><label for="3032"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3132" class="st-Radio" type="radio" name="size" value="3132" data-option-position="2"><label for="3132"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3232" class="st-Radio" type="radio" name="size" value="3232" data-option-position="2"><label for="3232"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3332" class="st-Radio" type="radio" name="size" value="3332" data-option-position="2"><label for="3332"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3432" class="st-Radio" type="radio" name="size" value="3432" data-option-position="2"><label for="3432"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3532" class="st-Radio" type="radio" name="size" value="3532" data-option-position="2"><label for="3532"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3632" class="st-Radio" type="radio" name="size" value="3632" data-option-position="2"><label for="3632"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3832" class="st-Radio" type="radio" name="size" value="3832" data-option-position="2"><label for="3832"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="4032" class="st-Radio" type="radio" name="size" value="4032" data-option-position="2"><label for="4032"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="4232" class="st-Radio" type="radio" name="size" value="4232" data-option-position="2"><label for="4232"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="4432" class="st-Radio" type="radio" name="size" value="4432" data-option-position="2"><label for="4432"><span></span></label></label></td>
<td class="st-cell_plus"><label><input id="4632" class="st-Radio" type="radio" name="size" value="4632" data-option-position="2"><label for="4632"><span></span></label></label></td>
<td class="st-cell_plus"><label><input id="4832" class="st-Radio" type="radio" name="size" value="4832" data-option-position="2"><label for="4832"><span></span></label></label></td>
<td class="st-cell_plus"><label><input id="5032" class="st-Radio" type="radio" name="size" value="5032" data-option-position="2"><label for="5032"><span></span></label></label></td>
</tr>
<tr>
<th class="st-headerV">34</th>
<td class="st-cell_basic"><label><input id="3034" class="st-Radio" type="radio" name="size" value="3034" data-option-position="2"><label for="3034"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3134" class="st-Radio" type="radio" name="size" value="3134" data-option-position="2"><label for="3134"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3234" class="st-Radio" type="radio" name="size" value="3234" data-option-position="2"><label for="3234"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3334" class="st-Radio" type="radio" name="size" value="3334" data-option-position="2"><label for="3334"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3434" class="st-Radio" type="radio" name="size" value="3434" data-option-position="2"><label for="3434"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3534" class="st-Radio" type="radio" name="size" value="3534" data-option-position="2"><label for="3534"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3634" class="st-Radio" type="radio" name="size" value="3634" data-option-position="2"><label for="3634"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3834" class="st-Radio" type="radio" name="size" value="3834" data-option-position="2"><label for="3834"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="4034" class="st-Radio" type="radio" name="size" value="4034" data-option-position="2"><label for="4034"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="4234" class="st-Radio" type="radio" name="size" value="4234" data-option-position="2"><label for="4234"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="4434" class="st-Radio" type="radio" name="size" value="4434" data-option-position="2"><label for="4434"><span></span></label></label></td>
<td class="st-cell_plus"><label><label><span></span></label></label></td>
<td class="st-cell_plus"><label><label><span></span></label></label></td>
<td class="st-cell_plus"><label><label><span></span></label></label></td>
</tr>
<tr>
<th class="st-headerV">36</th>
<td class="st-cell_basic"><label><label><span></span></label></label></td>
<td class="st-cell_basic"><label><label><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3236" class="st-Radio" type="radio" name="size" value="3236" data-option-position="2"><label for="3236"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3336" class="st-Radio" type="radio" name="size" value="3336" data-option-position="2"><label for="3336"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3436" class="st-Radio" type="radio" name="size" value="3436" data-option-position="2"><label for="3436"><span></span></label></label></td>
<td class="st-cell_basic"><label><label><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3636" class="st-Radio" type="radio" name="size" value="3636" data-option-position="2"><label for="3636"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="3836" class="st-Radio" type="radio" name="size" value="3836" data-option-position="2"><label for="3836"><span></span></label></label></td>
<td class="st-cell_basic"><label><input id="4036" class="st-Radio" type="radio" name="size" value="4036" data-option-position="2"><label for="4036"><span></span></label></label></td>
<td class="st-cell_basic"><label><label><span></span></label></label></td>
<td class="st-cell_basic"><label><label><span></span></label></label></td>
<td class="st-cell_plus"><label><label><span></span></label></label></td>
<td class="st-cell_plus"><label><label><span></span></label></label></td>
<td class="st-cell_plus"><label><label><span></span></label></label></td>
</tr>
</tbody>
</table>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
