Menu
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.
262
Using Input Radio checked property: The Input Radio checked property is used to return the checked status of an Input Radio Button. Use document. getElementById('id'). checked method to check whether the element with selected id is check or not.
To make a horizontal radio button set, add the data-type="horizontal" to the fieldset . The framework will float the labels so they sit side-by-side on a line, hide the radio button icons and only round the left and right edges of the group.
When focus moves to the group in which a radio button is selected, pressing Tab and Shift+Tab keys move focus to the radio button that is checked. Up Arrow and Down Arrow keys move focus and selection.
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
129
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.
40
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.
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
