html页面中的单选按钮错误答案

【问题标题】：RadioButton Error in html Pagehtml页面中的单选按钮错误
【发布时间】：2015-01-07 14:24:48
【问题描述】：

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

请在 js fiddle here 中找到我的代码

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

【问题讨论】：

标签： jquery html css radio-button

【解决方案1】：

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

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

具体来说

opacity: 0;

其目的是为您提供精美的“绿色复选框”样式单选按钮。由于默认按钮是隐藏的，背景代替了按钮，所以隐藏背景，现在也隐藏了按钮。如果您只想使用普通单选按钮，请删除 opacity: 0; 样式 fiddle，甚至删除整个块 (fiddle)

【讨论】：