css 好看的复选框选中

CSS复选框选中效果的美观性深受众多网站开发者的青睐。下面将介绍如何使用CSS样式设置一个漂亮的复选框选中效果。

input[type="checkbox"] {
      position: absolute;
      opacity: 0;
}
input[type="checkbox"] + label {
      position: relative;
      cursor: pointer;
}
input[type="checkbox"] + label:before {
      content: "";
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-right: 10px;
      border: 2px solid #ccc;
      background-color: #fff;
}
input[type="checkbox"]:checked + label:before {
      content: "2713";
      background-color: #5c6bc0;
      color: #fff;
      border-color: #5c6bc0;
}
    

代码中首先设置了一个透明度为0的input复选框，然后为该复选框的label标签设置了相对定位和指针光标。通过:before伪元素实现复选框的样式设置，设置了复选框的宽度为20px，高度也为20px，同时设置了一个2px的边框，边框的颜色为灰色，背景颜色为白色。当复选框选中时，通过checked伪类来改变:before伪元素的content属性，即将其设置为一个勾号“2713”，同时改变背景颜色、文字颜色和边框颜色，以便于用户较为明显地看出复选框的选中状态。

当然，上面的代码只是一个简单的实例，通过CSS样式，我们可以自由地调整复选框的大小、颜色、样式等属性，以达到网站美观性和用户友好性的目标。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！