HTML type=“radio“ 不显示按钮

「爱情、让人受尽委屈。」 2023-10-12 12:39 8阅读 0赞

## 问题 ##

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

### 详细问题 ###

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

笔者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” 不显示按钮][HTML type_radio_]

原创不易  
转载请标明出处  
如果对你有所帮助 别忘啦点赞支持哈  
![在这里插入图片描述][9cb4cb80a18345158f8a69e2f196e5b9.png]

[HTML type_radio_]: https://blog.csdn.net/CSDNones/article/details/52206329
[9cb4cb80a18345158f8a69e2f196e5b9.png]: https://img-blog.csdnimg.cn/9cb4cb80a18345158f8a69e2f196e5b9.png