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.


2 Answers 2


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:



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:

enter image description here

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.

  • 3
    That website is not by W3C, but rather W3Schools, which is not affiliated with the W3C in any way and has refused W3C's requests for W3Schools to disavow implications of connection.
    – fernozzle
    Oct 20, 2013 at 18:59
  • 1
    Thanks! I didn't mean to confuse the organizations. I've removed all references to W3C.
    – slothbear
    Oct 20, 2013 at 20:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.