这是我的代码:
td{
white-space: nowrap;
}
table{
text-align: center;
}
input[type="checkbox"]{
-ms-transform: scale(2); /* IE */
-moz-transform: scale(2); /* FF */
-webkit-transform: scale(3); /* Safari and Chrome */
-o-transform: scale(2); /* Opera */
padding: 10px;
}
#td_check{
padding-bottom: 0PX;
padding-top: 4px;
}
<table>
<tr style="border-color:#FFFFFF">
<td id="td_check"><input name="ch1" type="checkbox"></td>
<td id="td_check"><input name="ch1" type="checkbox"></td>
<td id="td_check"><input name="ch1" type="checkbox"></td>
<td id="td_check"><input name="ch1" type="checkbox"></td>
<td id="td_check"><input name="ch1" type="checkbox"></td>
<td id="td_check"><input name="ch1" type="checkbox"></td>
<td id="td_check"><input name="ch1" type="checkbox"></td>
<td id="td_check"><input name="ch1" type="checkbox"></td>
<td id="td_check"><input name="ch1" type="checkbox"></td>
<td id="td_check"><input name="ch1" type="checkbox"></td>
<td id="td_check"><input name="ch1" type="checkbox"></td>
<td id="td_check"><input name="ch1" type="checkbox"></td>
</tr>
</table>
我希望表中的每个复选框都填充父(tablecell).i表示每个单元格都填充一个checkbox.if我更改复选框的widh它不会在fierfox浏览器中工作。 如果有可能,我该怎么办?
答案 0 :(得分:1)
创建您自己的复选框。
$('.mycheckbox').bind('mousedown',function()
{
var current = $(this).css('background-position');
if (current == '-999px -999px')
$(this).css('background-position','center');
else
$(this).css('background-position','-999px -999px');
});
&#13;
td{
white-space: nowrap;
}
table{
text-align: center;
}
.mycheckbox {
width:100%;
height:100%;
background:#eee;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Check_mark_23x20_02.svg/1081px-Check_mark_23x20_02.svg.png);
background-size: 40px 40px;
background-repeat: no-repeat;
background-position: -999px -999px;
}
.td_check {
width:100px;
height:50px;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr style="border-color:#FFFFFF">
<td class="td_check"><div class='mycheckbox'></div></td>
<td class="td_check"><div class='mycheckbox'></div></td>
<td class="td_check"><div class='mycheckbox'></div></td>
<td class="td_check"><div class='mycheckbox'></div></td>
<td class="td_check"><div class='mycheckbox'></div></td>
<td class="td_check"><div class='mycheckbox'></div></td>
<td class="td_check"><div class='mycheckbox'></div></td>
<td class="td_check"><div class='mycheckbox'></div></td>
<td class="td_check"><div class='mycheckbox'></div></td>
<td class="td_check"><div class='mycheckbox'></div></td>
<td class="td_check"><div class='mycheckbox'></div></td>
<td class="td_check"><div class='mycheckbox'></div></td>
</tr>
</table>
&#13;
答案 1 :(得分:1)
您可以使用纯css而不是使用JavaScript来执行此操作:
table{
width:500px;
border-spacing:0;
text-align:center;
}
td{
border:2px solid #ddd;
}
#td_check{
position:relative;
height:30px;
}
input[type="checkbox"] {
display:none;
}
input[type="checkbox"] + label {
display:block;
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
background-color:rgba(0,0,0,.3);
cursor:pointer;
}
input[type="checkbox"] + label:hover ,
input[type="checkbox"]:checked + label {
background-color:rgba(0,0,0,.5);
}
input[type="checkbox"] + label::after {
content: '';
position: relative;
display: none;
width: 9px;
height: 15px;
border: 3px solid #fff;
border-top: none;
border-left: none;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
input[type="checkbox"]:checked + label::after {
display: inline-block;
vertical-align:middle;
}
&#13;
<table>
<tr>
<td id="td_check"><input name="ch1" type="checkbox" id="ch1-1"><label for="ch1-1"></label></td>
<td id="td_check"><input name="ch1" type="checkbox" id="ch1-2"><label for="ch1-2"></label></td>
<td id="td_check"><input name="ch1" type="checkbox" id="ch1-3"><label for="ch1-3"></label></td>
<td id="td_check"><input name="ch1" type="checkbox" id="ch1-4"><label for="ch1-4"></label></td>
<td id="td_check"><input name="ch1" type="checkbox" id="ch1-5"><label for="ch1-5"></label></td>
<td id="td_check"><input name="ch1" type="checkbox" id="ch1-6"><label for="ch1-6"></label></td>
<td id="td_check"><input name="ch1" type="checkbox" id="ch1-7"><label for="ch1-7"></label></td>
<td id="td_check"><input name="ch1" type="checkbox" id="ch1-8"><label for="ch1-8"></label></td>
<td id="td_check"><input name="ch1" type="checkbox" id="ch1-9"><label for="ch1-9"></label></td>
<td id="td_check"><input name="ch1" type="checkbox" id="ch1-10"><label for="ch1-10"></label></td>
<td id="td_check"><input name="ch1" type="checkbox" id="ch1-11"><label for="ch1-11"></label></td>
<td id="td_check"><input name="ch1" type="checkbox" id="ch1-12"><label for="ch1-12"></label></td>
</tr>
</table>
&#13;