css 单选框与复选框的样式

CSS 单选框与复选框是在网页设计中经常使用到的元素，它们可以让用户选择或判断某些选项或情况。在默认情况下，浏览器会自动给单选框和复选框添加一些样式，但这种样式通常不够美观，需要进行自定义。以下是一些常用的 CSS 样式，可以让单选框和复选框更美观。

/* 单选框 */input[type="radio"] {
      -webkit-appearance: none;
     /* 去掉默认样式 */  -moz-appearance: none;
      appearance: none;
      width: 20px;
      height: 20px;
      border: 2px solid #aaa;
      border-radius: 50%;
     /* 圆形样式 */  outline: none;
     /* 去掉边框 */  cursor: pointer;
 /* 鼠标变成手指 */}
/* 选中状态 */input[type="radio"]:checked {
      border-color: #007aff;
     /* 改变边框颜色 */  background: #007aff;
 /* 添加背景色 */}
/* 复选框 */input[type="checkbox"] {
      -webkit-appearance: none;
     /* 去掉默认样式 */  -moz-appearance: none;
      appearance: none;
      width: 20px;
      height: 20px;
      border: 2px solid #aaa;
      border-radius: 4px;
     /* 方形样式 */  outline: none;
     /* 去掉边框 */  cursor: pointer;
 /* 鼠标变成手指 */}
/* 选中状态 */input[type="checkbox"]:checked {
      border-color: #007aff;
     /* 改变边框颜色 */  background: #007aff;
 /* 添加背景色 */}
    

代码中，我们使用了 appearance:none; 属性来去掉默认样式，使得单选框和复选框可以自由添加自定义样式。然后我们设置了宽度、高度、边框、边框圆角、轮廓以及鼠标指针等样式，以便于用户的操作和美观度的提升。另外，在选中状态下，我们使用了 :checked 伪类来改变边框颜色以及添加背景色，使得单选框和复选框能够表示出其选中的状态。

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