Question

这是对我问的一个问题的回应 - 是否可以创建一个完全可自定义的HTML + CSS复选框而无需使用JavaScript。其中一个假设的解决方案很好，尽管每个标签/复选框对都有相当复杂的样式，这意味着使用: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;
    }

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

1 个答案: