HTML type=“radio“ 不显示按钮

问题

HTML中type＝"radio" 但是在界面中不显示按钮。

详细问题

HTML中type＝"radio" 但是在界面中不显示按钮。
笔者html核心代码

<div>
   性别
   <input type="radio" id="male" name="gender" value="male">
   <label for="male">男性</label>

   <input type="radio" id="female" name="gender" value="female">
   <label for="female">女性</label>
</div>

笔者css核心代码

    input[type="radio"] {
    
    
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 0;
        height: 0;
        padding: 0;
        margin: 0;
        overflow: hidden;
        opacity: 0;
    }

解决方案

删除css核心代码

解决原因

笔者css核心代码是用来自定义 HTML 中的单选框（radio button）的外观样式。

-webkit-appearance: none;
-moz-appearance: none; 
appearance: none;

这三行代码用于取消浏览器默认的外观样式，使得单选框不再显示默认的圆形或方形样式。

width: 0; 和 height: 0; 将单选框的宽度和高度设置为零，使其在页面上不可见。

padding: 0; 和 margin: 0; 将单选框的内边距和外边距设置为零，以确保其不占用任何空间。

overflow: hidden; 设置溢出隐藏，以防止任何内容溢出单选框的边界。

opacity: 0; 将单选框的透明度设置为零，使其完全透明。

通过应用这些样式，单选框将不可见，并且不会占用任何空间，但仍然可以通过 JavaScript 或其他方式进行操作。这允许开发人员自定义单选框的外观，以便与页面的设计风格相匹配，并提供更好的用户体验。

参考文献

解决原因参考chatgpt
解决方案
HTML type=“radio” 不显示按钮

原创不易
转载请标明出处
如果对你有所帮助 别忘啦点赞支持哈