Радио-кнопка не отображается в сафари и хроме

Question

Я ограниченные знания в html и css. Извините, если это глупый вопрос. Я пробовал по-разному, но не мог решить эту проблему.

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

В нижней части страницы есть кнопка радио, говоря «Предпочтительный режим контакта».

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

Чтобы сделать радио-кнопки видны, либо удалить -webkit-appearance: none; из CSS ИЛИ добавить стиль, как показано ниже

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

Вот скриншот

Answer 2

Вы

-webkit-appearance: none; 

набор на флажков и радио. Вам нужно укладывать флажки для их появления, или просто не избавиться от внешности: ни

How to style checkbox using CSS?

Answer 3

Я понимаю, что этот пост не упоминает Bootstrap CSS в качестве ключевого слова или метки, но одна вещь, которую я хотел бы упомянуть заключается в том, что если у вас есть тот же самый результат, что радиокнопки не отображаются в Chrome, но присутствуют в Firefox и IE, но вы также используете Bootstrap CSS, тогда вы захотите убедиться, что у вас нет имя класса «form-control» в теге ввода переключателя. По существу, вы можете использовать имя класса «form-control» для каждого другого типа элемента элемента, кроме типа ввода переключателя. Использование этого класса «form-control» в теге радиокнопки заставляет его исчезнуть, поэтому просто удалите атрибут класса и появится радиокнопка. Сначала я думал, что это проблема Chrome, но обнаружил, что переключатели появятся, когда я удалю ссылку на Bootstrap CSS.