Radio buttons display incorrectly on iPad

Question

A couple of radio buttons display all messed up on iPad (Safari) running latest IOS 8....

This is how the buttons look in all other browsers (PCs and Android phones):

This is how it displays on the iPad (see buttons on the left, misplaced and squared):

Here is my HTML (the two containing divs are because I have some additional unrelated code embedded [hidden here] - pls don't pay attention to that:))

    <div id= "contactform"> 

    <div id="theform">
    <form method="post" action="php/webmailer.php" name="form" id="message_form">                
    <ol>
        <li>
                <label for="full_name">First Name</label>
                <input type="text" name="fname" />
        </li>
        <li>
                <label for="lname">Last Name</label>
                <input type="text" name="lname" />
        </li>                               
        <li>
                <label for="email">Email</label>
                <input type="text" name="email" />  
        </li>   
        <li>
                <label for="phone">Phone</label>
                <input type="text" name="phone" />  
        </li>
        <li>

                <label for="method">Preferred contact method</label>

                <label for="Email">
                <input type="radio" name="method" value="Email" checked />
                Email</label>                                   

                <label for="Phone">
                <input type="radio" name="method" value="Phone" />
                Phone</label><br>   
        </li>       
        <li>
                <label for="comments">Your Message</label>
                <textarea name="message"></textarea> 
        </li>                  

                <input type="submit" name="submit" value="Submit" />                            
    </form> 
</ol>   

</div><!--end of theform div--> 

</div><!--end of contactform div-->

And this is my CSS...

#contactform {
    position: relative;
    float: left;
    margin: 50px 0 50px 80px;
    width: auto;    
}
#contactform ol li  {
    list-style-type:none; 
}
#contactform input{
    display:block; 
    width:300px;
    margin-left: 0;
    border:1px #000 solid; 
    border-radius: 3px;
    padding: 5px;  
}                       
#contactform textarea{
    height:150px;
    display:block; 
    width:300px;
    margin-top: 3px;
    border:1px #000 solid;
    border-radius: 3px;
    padding: 5px;   
}   
#contactform input:hover, textarea:hover {
    background-color:#E0E0E0; 
}
#contactform input:focus, textarea:focus{
    background-color:#E0E0E0; 
}   
#contactform label{
    display:block;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; 
    margin-top:10px; 
    font-size: 14px;
    font-style: italic;
    font-weight: bold;
    width: 330px;
}               
#contactform input[type="radio"]{
    display: inline-block !important;
    margin-top: 5px !important;
    margin-left: -90px !important;  
    margin-right: -80px !important;
    width: 200px !important;
}               
#contactform input[type="submit"]   {
    margin: 30px 0 0 120px;         
    width: 70px;
    font-size: 15.5px;      
}
#contactform input[type="submit"]:hover{
    cursor: pointer; 
    cursor: hand;
}
#theform{ 
    float: left;
    border-radius: 6px;
    background-color: #558ED5;
    padding: 25px 0;
    width:400px;
    box-shadow: 10px 10px 3px rgba(12, 3, 25, 0.8);
}

After some online research I came across of a -webkit-appearance option that allows you to retain your native UI settings on Safari but it did not work (I tried options such as .... -webkit-appearance: default-button or -webkit-appearance: radio). ALSO tried adding onclick="" to my HTML labels and inputs as per another thread on this site. Still no luck.

It would be highly appreciated if someone can provide some guidance on how to fix this issue. Some other threads on this site address this issue but under a scripting approach (as opposed to a CSS one)

kalyan kalyan · Accepted Answer · 2015-02-15T15:28:15

The positioning first gets changed because of the width: 300px; you have for all inputs. So instead of adding a new magic number for the radio buttons you can set it back to auto. Also the style for the radio buttons is more specific than the general input one so you don't need the !important. So this should work:

#contactform input[type="radio"] {
    display: inline-block;
    margin-top: 5px;
    width: auto;
}

And if you want some more space between radio buttons and text again you can of course add it back with something like this: margin-right: 10px;

Radio buttons display incorrectly on iPad

1 Answers