css 单选按钮 方 对勾

在HTML和CSS开发中，单选按钮是常见的控件之一。在选择选项时，我们通常会加上方对勾来表示选中的状态。这个方对勾可以通过CSS来实现。

/* CSS代码 */input[type="radio"] {
      /* 消除单选按钮的默认样式 */  -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      /* 自定义单选按钮的样式 */  border: 2px solid #666;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      margin: 0 10px 0 0;
      position: relative;
      top: 4px;
      cursor: pointer;
}
/* 选中单选按钮时的样式 */input[type="radio"]:checked::after {
      content: "\2714";
     /* 使用Unicode编码显示方对勾 */  display: block;
      position: absolute;
      top: -1px;
      left: 4px;
      font-size: 16px;
      color: #fff;
      text-align: center;
      line-height: 20px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #666;
}
    

上面的CSS代码首先消除了单选按钮的默认样式，然后自定义了单选按钮的样式，包括了边框、边框圆角、宽度、高度等。在选中单选按钮时，使用伪元素`::after`添加方对勾，并用绝对定位将其放置在单选按钮的正中央。

通过CSS样式，我们就可以轻松实现带方对勾的单选按钮样式了。这样的样式不仅美观，也便于用户判断选项是否被选中。

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