样式化默认的html复选框

Question

此HTML代码显示两个彼此相邻的复选框

<div id="mr_mrs">
    <ul class="mr_mrs form-no-clear">
        <li id="mr" class="popular-category">
            <label for="Mr" id="mr">Mr</label>
            <span><input name="Mr" id="Mr" type="checkbox" /></span>
            <div class="clearboth"></div>
            </li>
        <li id="mrs" class="popular-category">
            <label for="Mrs" id="mrs">Mrs</label>
                <span><input name="Mrs" id="Mrs" type="checkbox" /></span>
            <div class="clearboth"></div>
        </li>
    </ul>
</div>

我想自定义复选框到方框，然后选中复选框填充一些颜色。图片以下

如何做到这一点？

Answer 1

要将两个控件放在一起，请将其显示设置为内联块：display: inline-block。 （div的默认值是块显示。）

要使用户能够通过单击标签文本来选中该复选框，有几个选项。两者都显示在下面的例子中。

1. <label>是文字和复选框的父级。
2. 使用<label for="myId">some text</label><input id="myId">将标签与输入相关联。*

*注意：使用for / id方法时，它是label-for和input-id。我注意到在示例中id已应用于两个元素，id应该是页面唯一的。

＆＃13;
＆＃13;
.checkbox {
  margin: 4px;
  display: inline-block;
}
＆＃13;
<div class="checkbox">
  <label>Box 1<input type="checkbox"></label>
</div>
<div class="checkbox">
  <label for="myId">Box 2</label>
  <input id="myId" type="checkbox">
</div>
＆＃13;
＆＃13;
＆＃13;