用复选框checkbox制作标签

效果：

未选时：

选择若干标签：

 

代码：

html：

<div class="optionrow">
                    <label class="optiontpye">建设年份：</label>
                    <input class="optionitem" type="checkbox" name="year" checked="checked" id="allyear"/>
                    <label class="optionlabel" for="allyear">全部</label>
                    <input class="optionitem" type="checkbox" name="year" id="y2019"/>
                    <label class="optionlabel" for="y2019">2019年</label>
                    <input class="optionitem" type="checkbox" name="year"  id="y2018"/>
                    <label class="optionlabel" for="y2018">2018年</label>
                    <input class="optionitem" type="checkbox" name="year"  id="y2017"/>
                    <label class="optionlabel" for="y2017">2017年</label>
</div>

label写在对应input的相邻后面

css：

将input设置为不可见display:none，仅对label设置样式

.optionitem[type='checkbox'] {
    display: none;
}

.optionlabel{
    cursor: pointer;
    border: 1px solid #5a6268;
    border-radius: 8px;
    padding: 2px 10px;
}
.optionlabel:hover, .optionitem:checked + .optionlabel{
    color: #00ffff;
    border: 1px solid #00ffff;
}

当标签选中时，改变相邻的label样式，即使用css中的+选择器（相邻兄弟选择器，参考：http://www.w3school.com.cn/css/css_selector_adjacent_sibling.asp）

 

第二种

效果：

代码：

css：

.optionitem + label::before {
    height: 13px;
    width: 13px;
    background: url(../images/newImages/projectlist/选框未选中.png) no-repeat center;
    content: "\a0\a0\a0\a0\a0";
}
.optionitem[type="checkbox"]:checked + label::before {
    background: url(../images/newImages/projectlist/选框选中.png) no-repeat center;
}

使用伪元素label::before，用图片代替默认框

注意：需要设置content，否则显示不出来，"\a0"是空格

此方法参考：https://www.cnblogs.com/xinjie-just/p/7302020.html