css6多选按钮代码

CSS6多选按钮是一种非常方便的UI设计元素，其代码如下：

/*基础设置*/
input[type="checkBox"] {
    display: none; /*隐藏默认的多选框*/
}

/*自定义按钮*/
input[type="checkBox"] + label {
    display: inline-block; /*设置标签元素为行内块*/
    padding: 8px 20px; /*设置内边距*/
    font-size: 16px; /*设置字体大小*/
    border: 1px solid #ccc; /*设置边框样式*/
    border-radius: 4px; /*设置边框圆角*/
    cursor: pointer; /*设置鼠标样式为手型*/
}

/*选中状态*/
input[type="checkBox"]:checked + label {
    background-color: #ccc; /*设置背景颜色*/
}

/*禁用状态*/
input[type="checkBox"]:disabled + label {
    opacity: 0.5; /*设置半透明*/
    cursor: default; /*设置鼠标样式为默认*/
}

css6多选按钮代码

其中，input[type="checkBox"]用于基础设置，将默认的多选框隐藏，并在其上建立自定义的按钮。同时，使用input[type="checkBox"] + label选择器让与多选框相邻的label标签，通过设置内边距、字体大小、边框样式、边框圆角和鼠标样式等属性，实现了非常简洁而美观的按钮样式。

此外，利用input[type="checkBox"]:checked + label选择器，还可以设置多选按钮的选中状态的样式，通常我们会选择改变其背景颜色来突出显示。而利用input[type="checkBox"]:disabled + label选择器，还可以设置按钮的禁用状态，以及在不可编辑状态下的半透明和默认鼠标样式。

css6多选按钮代码

相关文章