css 单选择框去除默认样式

CSS单选框是我们网站中经常使用到的一个控件，但是默认样式可能不满足我们的需求，需要去除掉默认样式。下面我们来共同学习如何去除默认样式。

  input type="radio" name="gender" value="man">
    男  input type="radio" name="gender" value="woman">
女

上面的代码演示了一个简单的单选框，接下来我们来添加一些CSS属性：

  input[type='radio']{
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        outline: none;
        border: none;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background-color: #ccc;
        margin-right: 8px;
    position: relative  }
  input[type='radio']:before{
        content:'';
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0);
        width: 10px;
        height: 10px;
        background-color: #fff;
        border-radius: 50%;
        transition: transform .2s ease-out;
  }
  input[type='radio']:checked:before{
        transform: translate(-50%, -50%) scale(1);
  }
    

经过上面的代码添加之后，我们的单选框样式就发生了变化。首先我们通过appearance属性将默认的样式去掉，然后用border-radius属性来设置边框半径，通过before伪类来实现选中状态下的样式。

希望上面的内容能够帮助到你，实现自己所需要的样式效果。

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