Html 单选按钮未在 safari 和 chrome 中显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35618144/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Radio button is not showing in safari and chrome
提问by Soumya
I am a limited knowledge in html and css. Please excuse if it is a silly question. I have tried in different ways, but could not solve this issue.
我对 html 和 css 的了解有限。如果这是一个愚蠢的问题，请原谅。我尝试了不同的方法，但无法解决这个问题。
http://teddyslist.com/dev/register.php
http://teddyslist.com/dev/register.php
At the bottom of the page, there is a radio button saying "Preferred mode of contact".
在页面底部，有一个单选按钮，上面写着“首选联系方式”。
<input type="radio" name="preferredcontact" value="P"> Phone
<input type="radio" name="preferredcontact" value="E"> Email
Radio buttons are showing in Firefox and even on IE. But they are not showing in Chrome and Safari. It is very strange to me. I think there is some conflict in CSS.
单选按钮显示在 Firefox 中，甚至在 IE 上。但它们没有显示在 Chrome 和 Safari 中。这对我来说很奇怪。我认为 CSS 中存在一些冲突。
回答by Lal
When I inspected your code, I could see that you have a style -webkit-appearance: none;that is specified for input, textarea, buttonin realsite.css
当我检查你的代码，我可以看到你有一个风格-webkit-appearance: none;被指定input, textarea, button在realsite.css
The CSS is as follows
CSS如下
input, textarea, button {
-webkit-appearance: none;
-webkit-font-smoothing: antialiased;
resize: none;
}
To make the radio buttons visible, either remove -webkit-appearance: none;from the CSS ORadd a style as below
要使单选按钮可见，请-webkit-appearance: none;从 CSS 中删除或添加如下样式
input[type="radio"]{
-webkit-appearance: radio;
}
Here is a screenshot
这是一个屏幕截图
回答by rg288dev
I realize that this post does not mention Bootstrap CSS as a keyword or tag but one thing I would mention is that if you are having the exact same result which is that the radio buttons do not show up in Chrome but are present in Firefox and IE, but, you are also using Bootstrap CSS then you will want to ensure that you do not have the class name "form-control" on the radio button input tag specifically. Essentially, you can use the class name "form-control" on every other form element type except the radio button input type. Using that class "form-control" on a radio button tag makes it disappear therefore just remove the class attribute and the radio button will appear. At first I thought this was a Chrome issue but found the radio buttons would appear when I removed the reference to the Bootstrap CSS.
我意识到这篇文章没有提到 Bootstrap CSS 作为关键字或标签，但我要提到的一件事是，如果您有完全相同的结果，即单选按钮没有出现在 Chrome 中，但在 Firefox 和 IE 中出现，但是，您也在使用 Bootstrap CSS，那么您需要确保在单选按钮输入标签上没有专门的类名“form-control”。本质上，您可以在除单选按钮输入类型之外的所有其他表单元素类型上使用类名“form-control”。在单选按钮标签上使用该类“表单控件”使其消失，因此只需删除类属性，单选按钮就会出现。起初我认为这是 Chrome 的问题，但发现当我删除对 Bootstrap CSS 的引用时会出现单选按钮。
回答by Sundaram Seth
If you use :
如果您使用：
input{
display:none;
}
then radio button will not be displayed.
By default it takes the value display: none;
那么单选按钮将不会显示。默认情况下，它采用值display: none;
Change it to:
将其更改为：
input{
display: inline;
}
and it will be visible.
它将是可见的。
回答by Kevin
You have
你有
-webkit-appearance: none;
set on checkboxes and radio. You need to style the checkboxes for them to appear, or simply get rid of the appearance: none
在复选框和收音机上设置。您需要为复选框设置样式以使其出现，或者干脆去掉外观：无
