[分享]css3改变复选框的样式

CSS3提供了一种方便的方式来美化复选框的样式，通过这种方式，我们可以使复选框的样式与网站的整体设计一致，更加美观，提高用户体验。 input { display: none; // 隐藏原本的复选框...

CSS3提供了一种方便的方式来美化复选框的样式，通过这种方式，我们可以使复选框的样式与网站的整体设计一致，更加美观，提高用户体验。

 input[type="checkbox"] {
    display: none; // 隐藏原本的复选框
  }
  input[type="checkbox"] + label::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    margin-right: 10px;
    vertical-align: middle;
    background-color: #fff;
  }
  input[type="checkbox"]:checked + label::before {
    content: "2713"; // 选中时显示勾号
    color: #fff;
    background-color: #007bff;
  }
  label {
    display: inline-block;
    font-size: 16px;
    margin-bottom: 10px;
  } 

在以上代码中，首先我们将原本的复选框隐藏，然后针对每一个复选框对应的label标签定义样式，利用CSS3的伪元素::before来创建一个方框，并在其前面留出一点间隙用来标识是否选中，选中时在方框内显示勾号。同时，我们还对标签的样式进行了微调，使之更加协调。