单选按钮未显示在safari和chrome中

Question

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

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

在页面底部，有一个单选按钮说＆＃34;首选联系方式＆＃34;。

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

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

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;
}

这是截图

Answer 2

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

Answer 3

你有

-webkit-appearance: none;

设置复选框和电台。您需要设置复选框的样式以显示它们，或者只是去除外观：无

How to style checkbox using CSS?

Answer 4

如果您使用：

input{

   display:none;

}

然后将不显示单选按钮。 默认情况下，其值为display: none;

将其更改为：

input{

   display: inline;

}

它将可见。