checkbox设置css

checkbox是网页中常见的元素之一，常用于用户的多选或单选操作。在使用checkbox的过程中，我们往往需要对其样式进行自定义，以便更好的与网页配合，达到更好的用户体验。本文将介绍如何通过css来实现checkbox的自定义样式。

一、关于CSS
CSS（Cascading Style Sheets，层叠样式表）是一种用于描述文档样式（字体、颜色、大小等）的语言。它可以使HTML页面与HTML代码分离，使页面的结构和样式分离，从而实现样式的复用、统一和易于维护。

二、HTML中的checkbox元素
以下是一个最基本的checkbox元素：

苹果

在这个例子中，我们定义了一个名称为“fruit”的checkbox元素，并且它的值为“Apple”，复选框名称为“苹果”。

立即学习“前端免费学习笔记（深入）”；

三、如何设置checkbox的样式

在CSS中，我们可以通过a:hover或input[type=button]:active等伪类选择器选择页面元素来设置其样式。对于checkbox元素，我们同样可以使用伪类选择器来实现其样式的自定义。

1.设置checkbox的外观

input[type=checkbox] {
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid #c0c0c0;
outline: none;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}

以上代码包含以下属性:

width和height：设置元素的宽度和高度；

border-radius：设置元素的边框半径，使元素的边缘变得圆润；

border：设置元素的边框样式；

outline：去掉元素的外部轮廓线；

appearance：设置元素的外观，使其变为透明；

-webkit-appearance和-moz-appearance：适用于不同的浏览器内核。

通过以上的代码设置之后，我们可以使checkbox元素获得一个圆形的形状，而不是传统的方形框。

2.为checkbox设置状态样式

input[type="checkbox"]:checked + label {
background-color: #009688;
color: #fff;
}

在CSS中，使用:checked伪类选择器可以选择被选中的checkbox元素。使用该选择器，我们可以为被选中的checkbox元素设置不同的颜色或背景图片等样式。以上代码中，“+”选择器表示选择相邻的元素，用于选中checkbox元素后面相邻的label标签。

3.为checkbox设置标签样式

label {
display: inline-block;
line-height: 20px;
margin-left: 10px;
}

CSS中的label标签通常用于为表单元素提供标签文本。在这里，我们通过设置display属性可以使标签文本显示为一个块元素，并设置line-height来设置文本的垂直居中样式。