I have encountered an issue in my project with two checkboxes that have background images. When I remove the background image property, the checkbox disappears. Can anyone help me solve this problem?
You can find the code on js fiddle here
Here is the HTML:
<table id="rbtnsslEnabled" class="chkMargin">
<tbody>
<tr>
<td>
<input id="rbtnsslEnabled_0" type="radio" name="rbtnsslEnabled" value="SSL" />
<label for="rbtnsslEnabled_0">SSL</label>
</td>
</tr>
<tr>
<td>
<input id="rbtnsslEnabled_1" type="radio" name="rbtnsslEnabled" value="TLS" />
<label for="rbtnsslEnabled_1">TLS</label>
</td>
</tr>
</tbody>
</table>
And here is the CSS:
table {
width: 100% !important;
border: none;
table-layout: fixed;
}
input[type=checkbox]:not(old), input[type=radio]:not(old) {
width: 40px;
margin: 0;
padding: 0;
opacity: 0;
}
input[type=checkbox]:not(old) + label, input[type=radio]:not(old) + label {
display: inline-block;
margin-left: -28px;
padding-left: 28px;
background: url('http://s6.postimg.org/4e4im9vkt/checks.png') no-repeat 0 0;
padding-bottom: 4px;
}
input[type="radio"], input[type="checkbox"] {
margin: 4px 0 0;
margin-top: 1px \9;
line-height: normal;
}
input[type=radio]:not(old):checked + label {
background-position: 0 -24px;
}