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

Is it possible to fully customize a checkbox with CSS and HTML only and no Javascript

本文关键字：Javascript 复选框 自定义 HTML CSS 是否      更新时间：2024-05-30

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

我想这里更清楚。这是上一个问题：使自定义复选框与css一起工作-选择或检查不工作。

我如何才能在最小干扰的情况下最好地实现这一点？这已经是一个使用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>

我希望这就是您想要的。我隐藏了原来的按钮，在标签中添加了一个跨度，并使用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;
    }
相关文章：