是否可以完全自定义仅使用 CSS 和 HTML 而没有 Javascript 的复选框

Question

这是对我提出的一个问题的回应——是否可以在不使用 JavaScript 的情况下创建一个完全可定制的 HTML + CSS 复选框。假设的解决方案之一很好，尽管每个标签/复选框对关联的样式相当复杂，这意味着使用 :before 和 :after 不允许将复选框放置到正确的 CSS div 标签中。

我认为这里更清楚。这是上一个问题：Making custom checkboxes work with css - select or check not working。

我怎样才能以最小的干扰最好地实现这一目标？这已经是一个包含 JavaScript 和 jQuery 的复杂项目，并且 HTML 是由服务器渲染的输出广告 - 所以它需要采用以下形式：

<label for="id_MyJobChoices_0">Agriculture
    <div id="left" class="cell">
        <div data-icon-name="chart" class="icon chart"></div>
    </div>
    <div id="center" class="cell">
        <div class="option-text"></div>
    </div>
    <div id="right" class="cell">
        <div class="option-checkbox">
            <input id="id_MyJobChoices_0" name="MyJobChoices" type="checkbox" value="_AG" />
        </div>
    </div>
</label>

Answer 1

我希望这是您正在寻找的。我隐藏了原始按钮并在标签中添加了一个跨度，并使用 CSS 对其进行样式设置，使其看起来像按钮。但是您也可以使用图像并将其设置为跨度的背景，使其看起来像按钮。您可以将跨度放在标签文本的任一侧。这是因为当您使用“for”属性时，单选按钮的整个标签都是可点击的。

这是一个小提琴：http://jsfiddle.net/QhBrZ/1/

HTML：

<div id="left" class="cell">
    <div data-icon-name="chart" class="icon chart"></div>
</div>
<div id="center" class="cell">
    <div class="option-text"></div>
</div>
<div id="right" class="cell">
    <div class="option-checkbox">
        <input id="id_MyJobChoices_0" name="MyJobChoices" type="checkbox" value="_AG" /><label for="id_MyJobChoices_0">Agriculture<span></span></label>
    </div>
</div>

CSS：

input[type="checkbox"] {
        display: none;
    }
input[type="checkbox"] + label span {
        display:inline-block;
        width:13px;
        height:13px;
        margin:-3px 4px 0 0;
        border-radius:10px;
        border:1px solid #777;
        vertical-align:middle;
        box-shadow: 1px 1px 4px 0px rgba(0,0,0,.7) inset;
        background-color: rgba(0,0,0,.5);
        cursor:pointer;
    }
input[type="checkbox"]:checked + label span {
        box-shadow: 0px 0px 1px 3px rgba(0, 0, 0, 0.4) inset;
        background-color: #29c6ff;
    }