There is a form in which there are radio buttons. These radio buttons on a mobile safari are displayed as checkboxes (and the selected radio buttons are displayed as small and unselected) (see screenshot).

The only thing that found on the Internet is the property -webkit-appearance: radio , but it did not help

As I understand it, the safari itself redefines the styles of these buttons to its own, the question is how to turn them off or redefine them to normal ones?

UPD: button example

 <input type="radio" name="customer" value="1" checked="checked">

There are almost no styles, except for height / width and positioning. Safari checkbox

  • Maybe this will help -webkit-appearance: none; - soledar10
  • So the buttons just disappear - Nikita Mihalyov
  • add button code to the question. - Mikhail Vaysman

1 answer 1

First you need to reset the styles:

 input, textarea, button { -webkit-appearance: none; -webkit-font-smoothing: antialiased; resize: none; }

And after we set new ones:

 input[type="radio"]{ -webkit-appearance: radio; }
  • why reset textarea and button ? - Sasha Omelchenko
  • @SashaOmelchenko so as not to reset every time when writing buttons and fields. But this is a female version. It would be more correct not all input to reset. See how we did here github.com/1000tech/godlike.css - Vadizar
  • I mean that textarea and button not related to input[type="radio"] , which is being asked why then they should be reset in this particular code snippet? secondly, why first reset the radio button with -webkit-appearance: none , and then ask it -webkit-appearance: radio ? Why not immediately give it a definition? - Sasha Omelchenko