Safari 和 Chrome 中没有显示单选按钮

Question

我对 html 和 css 的了解有限。如果这是一个愚蠢的问题，请原谅。我尝试过不同的方法，但无法解决这个问题。

http://teddyslist.com/dev/register.php

在页面底部，有一个单选按钮，上面写着“首选联系方式”。

 <input type="radio" name="preferredcontact" value="P"> Phone
<input type="radio" name="preferredcontact" value="E"> Email

单选按钮显示在 Firefox 甚至 IE 中。但它们不会在 Chrome 和 Safari 中显示。这对我来说很奇怪。我认为 CSS 中存在一些冲突。

原文由 Soumya 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

当我检查你的代码时，我可以看到你有一个样式 -webkit-appearance: none; 是为 input, textarea, button 在 realsite.css 中指定的

CSS如下

input, textarea, button {
    -webkit-appearance: none;
    -webkit-font-smoothing: antialiased;
    resize: none;
}

要使单选按钮可见，请从 CSS 中删除 -webkit-appearance: none; 或 添加如下样式

input[type="radio"]{
    -webkit-appearance: radio;
}

这是截图

原文由 Lal 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我意识到这篇文章没有提到 Bootstrap CSS 作为关键字或标签，但我要提到的一件事是，如果你有完全相同的结果，即单选按钮没有显示在 Chrome 中，但存在于 Firefox 和 IE 中，但是，您还使用了 Bootstrap CSS，那么您需要确保您没有专门在单选按钮输入标签上使用类名“form-control”。本质上，您可以在除单选按钮输入类型之外的所有其他表单元素类型上使用类名“form-control”。在单选按钮标签上使用该类“form-control”会使它消失，因此只需删除类属性，单选按钮就会出现。起初我以为这是一个 Chrome 问题，但发现当我删除对 Bootstrap CSS 的引用时，单选按钮会出现。

原文由 rg288dev 发布，翻译遵循 CC BY-SA 3.0 许可协议