html 页面中的单选按钮错误

Question

在我的项目中，我有两个复选框并且有背景图片。当我删除那些 buckground 图像属性时，复选框不显示。谁能解决这个问题？

请在js中找到我的代码fiddlehere

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>

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 ;
    line-height: normal;
}
input[type=radio]:not(old):checked + label {
    background-position: 0 -24px;
}

Answer 1

下面的 css 是有意隐藏（默认）单选按钮：

input[type=checkbox]:not(old), input[type=radio]:not(old) {
    width: 40px;
    margin: 0;
    padding: 0;
    opacity: 0;
}

特别是

opacity: 0;

其目的是为您提供精美的 "green check box" 风格的单选按钮。由于默认按钮是隐藏的，背景代替了按钮，所以隐藏背景，现在也隐藏了按钮。如果您只想使用普通的单选按钮，请删除 opacity: 0; 样式 fiddle, or even that entire block (fiddle)

html 页面中的单选按钮错误

RadioButton Error in html Page

html

css

jquery

radio-button