Has iOS 7 changed the appearance of radio buttons?

Question

I am doing the final tests of styles on a website we are launching, and trying it out on iOS 7 I noticed something - In our forms with radio buttons, they are showing like checkboxes - That is, the button itself is a square, which is replaced by by a small circle to indicate which one is selected. Functionally they still work the same - only one can be selected simultaneously, however it seemed more than a little offputting when I first noticed it. Is this something that iOS 7 did or have I screwed up my CSS somewhere that is only showing in iOS 7?

Yeah on further inspection it would appear that isn't just an iOS 7 thing, but devices other than iPhones don't show them like that. It seems I have some specific part of the stylesheet doing that for iPhones… hmmmm.

Answer 1

You must have CSS styles that are being applied input field types that are affecting your radio button inputs as well, and that have a low border radius values eg. 2px.

I suggest you change your CSS so it doesn't affect radio button inputs, by either making the offending CSS specific to your other input types (eg. input[type=text], or excluding radio input types from being styled by the style:

Eg.

input:not([type='radio'])
    border-radius:2px;
}

Answer 2

I haven't seen square radio buttons like that on sites I've visited using Safari on iOS 7.

Visiting this page for trying out radio buttons displayed this screen shot from iOS 7:

Do you see square radio buttons on other sites? Can you point to an example on your site for us to try, or maybe extract just one radio button to share? Given the evidence so far, I'm guessing the behavior is specific to your site.