Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
add comment

2 Answers

up vote 1 down vote accepted

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;
}
share|improve this answer
add comment

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.

share|improve this answer
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 '13 at 18:59
1  
Thanks! I didn't mean to confuse the organizations. I've removed all references to W3C. –  slothbear Oct 20 '13 at 20:53
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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