CSS3 iOS Styling Radio Buttons and Check Boxes

Here we have the general code to create a beautiful radio and check box style based upon the iOS design that Apple has made so popular.

Hong Kiat does a nice job of compiling tutorials based upon the general idea that using imagery is evil and should be avoided whenever necessary. In my last tutorial I covered utilizing pseudo commands which you can do in this situation, but I’d avoid it as a background image here would bog down the form elements. You may also experience slight lag when using the form due to the loading of the image.

This is the form code for the radio buttons

1
2
3
4
5
6
<div class="radio">  
    <input id="male" type="radio" name="gender" value="male">  
    <label for="male">Male</label>  
    <input id="female" type="radio" name="gender" value="female">  
    <label for="female">Female</label>  
</div>

This is the form code for the check boxes

1
2
3
4
5
6
7
<div class="checkbox">  
    <input id="check1" type="checkbox" name="check" value="check1">  
    <label for="check1">Checkbox No. 1</label>  
    <br>  
    <input id="check2" type="checkbox" name="check" value="check2">  
    <label for="check2">Checkbox No. 2</label>  
</div>

Now that the boring part is over, (we are done with the HTML structure), now let’s put on the styles to these < input > objects. First we will tackle the radio buttons and then move on to the check boxes. The idea is to turn the default form elements into a more iOS looking design. This will be very basic and you can enhance it greatly by using gradients and shadows, but it will definitely give you a good base understanding.

This is iOS styling

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
label {
    display: inline-block;
    cursor: pointer;
    position: relative;
    padding-left: 25px;
    margin-right: 15px;
    font-size: 13px;
}

input[type=radio] {
    display: none;
}

label:before {
    content: "";
    display: inline-block;

    width: 16px;
    height: 16px;

    margin-right: 10px;
    position: absolute;
    left: 0;
    bottom: 1px;
    background-color: #aaa;
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}

.radio label:before {
    border-radius: 8px;
}

Now with a little guidance from above, you should be able to style your check boxes, but if you get stuck (the circle is a little confusing at first), then go ahead and reference the code below.

1
2
3
4
5
6
7
input[type=radio]:checked + label:before {
    content: "\2022";
    color: #f3f3f3;
    font-size: 30px;
    text-align: center;
    line-height: 18px;
}

css3 ios

Alternatively, you can also use an image and show it through the background-image property in :before pseudo-element we have added previously. I chose not to show the code because we just covered pseudo elements in the last lesson which means you can go read another great tutorial, and personally I like to avoid images as they only increase the loading time required.

This is only one method of styling form elements to customize a check box and a radio input. There are certainly more ways you can enhance the look to be more stunning. Since we used CSS3 :checked, this technique will only work in browsers that support it which would be anything post IE7.