Radio button is not showing in safari and chrome

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

enter image description here


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.

Tags:

Html

Css