Radio button is not showing in safari and chrome

Question

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.

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.

Please provide more code from around these tags – Satej S Feb 25 '16 at 04:12 — Satej S, Feb 25 '16 at 04:12
I am just using this tag within a form, nothing else. – Soumya Feb 25 '16 at 04:16 — Soumya, Feb 25 '16 at 04:16
The code works fine on Chrome, which version are you on? – Satej S Feb 25 '16 at 04:18 — Satej S, Feb 25 '16 at 04:18

score 24 · Accepted Answer · edited Jan 30 '17 at 12:44

When I inspected your code, I could see that you have a style -webkit-appearance: none; that is specified for input, textarea, button in realsite.css

The CSS is as follows

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 OR add a style as below

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

Here is a screenshot

score 4 · Answer 2 · answered Oct 31 '17 at 04:06

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.

score 1 · Answer 3 · edited Jul 20 '19 at 13:21

1

If you use :

input{

   display:none;

}

then radio button will not be displayed. By default it takes the value display: none;

Change it to:

input{

   display: inline;

}

and it will be visible.

edited Jul 20 '19 at 13:21

Vega

27,856
27
95
103

answered Jul 20 '19 at 12:57

Seth

331
4
9

score 0 · Answer 4 · edited May 23 '17 at 12:34

0

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

How to style checkbox using CSS?

edited May 23 '17 at 12:34

Community

1
1

answered Feb 25 '16 at 04:17

Kevin

348
4
13

Radio button is not showing in safari and chrome

4 Answers4

Linked