如何用div仿checkbox表单样式美化及功能

Checkbox是Web开发中常用的一种表单元素，通常用于选择框，比如选择乘客类型，选择性别等等。但是Checkbox自带的样式比较简单，具有一定的限制，用户体验也相对较差。为了解决这样的问题，我们可以通过使用div对Checkbox进行美化，同时还可以添加一些可以自定义的功能。接下来我们将详细介绍如何使用div仿checkbox表单样式美化及功能。

一、基本结构

首先在HTML中我们需要构建一个基本的checkbox结构，然后再通过CSS将其美化。基本的结构主要包括以下几个元素：

1. 外层div，使用Css设置其样式，控制整个checkbox的大小、颜色和形状等。

2. checkbox label标签，控制Checkbox的文本内容。

3. checkbox input标签，真正的checkbox元素，隐藏在div中，用于实现选中和取消选中的功能。

如下代码所示，这就是一个基本的Checkbox结构。

<div class="checkbox">
    <input type="checkbox" id="checkbox">
    <label for="checkbox">Checkbox</label>
</div>

二、样式设置

1. Checkbox外层div样式设置

我们需要在CSS中设置外层div的样式，使其变得更加美观，同时来实现勾选、不勾选的状态切换。

.checkbox {
    display: inline-block;
    width: 18px;
    height: 18px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.checkbox::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 3px;
    border: 2px solid #fff;
    border-top: none;
    border-right: none;
    opacity: 0;
    transition: all .2s ease-in-out;
}

.checkbox input:checked + ::after {
    opacity: 1;
}

上面的代码中，我们主要设置了：

1. display: inline-block; 实现元素的块级化，使其能够设置宽度和高度。

2. width: 18px; height: 18px; 控制Checkbox的大小。

3. background: #fff; 设置Checkbox空状态下的背景颜色。

4. border: 1px solid #ccc; 设置边框样式，增加美观度。

5. border-radius: 3px; 设置边框圆角。

6. position: relative; overflow: hidden; 为了实现模拟勾选框，使得选中状态的勾勾能够在外面显示。

7. cursor: pointer; 鼠标指针变成小手状，让用户可以点击。

此外，在代码中还将使用::after样式将Checkbox的勾勾效果加入，在空态时不显示，在勾选时才显示。通过属性设置opacity实现。

2. Checkbox文本label样式设置

可以使用CSS美化label标签的样式，来使其配合上面checkbox的样式更加和谐，做到一目了然。

.checkbox label {
    display: inline-block;
    margin-left: 6px;
    font-size: 14px;
    font-weight: normal;
    line-height: 18px;
    user-select: none;
}

上面的代码主要设置了：

1. display: inline-block; 将label设置成inline-block类型，使其在Checkbox的旁边显示。

2. margin-left: 6px; 将label的左边距设置成6px，让它和Checkbox之间有一定的距离，并且显得更加美观整齐。

3. font-size: 14px; 控制label字体大小。

4. font-weight: normal; 控制label字体加粗程度。

5. line-height: 18px; 控制文本行高，让label的文本能够垂直对齐Checkbox的居中点。

6. user-select: none; 控制label文字不能被选择。

好了，经过对上面两部分的CSS代码设置，我们成功地完成了仿Checkbox表单的前两部分，但是，还有一个最关键的部分需要我们继续进行开发，那就是功能性的的设置。

三、功能设置

通过前面的CSS代码，我们已经对真正的Checkbox进行了美化。但它最关键的属性----是否勾选，我们还没有实现。因此需要进一步进行功能开发。

首先，我们需要通过元素选择器控制复选框的选中状态。对于checkbox的实际使用，我们将通过重设label的背景颜色来表示选中状态。

.checkbox input:checked + label {
    background-color: #4CAF50;
    color: #fff;
}

上面的代码中，我们通过:input:checked来获取Checkbox是否被勾选，并通过+dlabel来匹配到label标签，从而确定样式设置内容。

其次，我们为这个checkbox绑定了一个click事件，因为我们希望用户点击这个div，不管用户点击的是文本还是空白处，都能够实现checkbox的选中与非选中。

 const checkboxes = document.querySelectorAll('.checkbox label');
 for (let i = 0; i < checkboxes.length; i++) {
   checkboxes[i].addEventListener('click', () => {
     const checkbox = checkboxes[i].previousElementSibling;
     checkbox.checked = !checkbox.checked;
   });
 }

总之，我们通过JS代码来绑定了click事件，然后获取Checkbox的状态并进行反转，使其在点击后实现状态的切换。

四、完整代码

最后，我们将代码整合在一起，供读者参考和使用。

<div class="checkbox">
    <input type="checkbox" id="checkbox" />
    <label for="checkbox">Checkbox</label>
</div>

<style type="text/css">
    .checkbox {
        display: inline-block;
        width: 18px;
        height: 18px;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 3px;
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }

    .checkbox::after {
        content: '';
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 6px;
        height: 3px;
        border: 2px solid #fff;
        border-top: none;
        border-right: none;
        opacity: 0;
        transition: all .2s ease-in-out;
    }

    .checkbox input:checked+::after {
        opacity: 1;
    }

    .checkbox label {
        display: inline-block;
        margin-left: 6px;
        font-size: 14px;
        font-weight: normal;
        line-height: 18px;
        user-select: none;
    }

    .checkbox input:checked+label {
        background-color: #4CAF50;
        color: #fff;
    }
</style>

<script>
    const checkboxes = document.querySelectorAll('.checkbox label');
    for (let i = 0; i < checkboxes.length; i++) {
        checkboxes[i].addEventListener('click', () => {
            const checkbox = checkboxes[i].previousElementSibling;
            checkbox.checked = !checkbox.checked;
        });
    }
</script>

通过上面的代码，我们可以完成一个仿Checkbox表单功能，既具有美化效果，也具有相当的用户体验和交互性。当然，这种前端技术还是针对高端用户适用，对于某些低端用户由于各种原因可能不具备良好的交互体验。