iOS Segmented Control Style

by ginpei

HTML

<p>
    <span class="segmented">
        <label><input type="radio" name="fruit" value="apple" checked><span class="label">Apple</span></label>
        <label><input type="radio" name="fruit" value="grape"><span class="label">Grape</span></label>
        <label><input type="radio" name="fruit" value="orange"><span class="label">Orange</span></label>
    </span>
</p>
<p>
    <span class="segmented">
        <label><input type="radio" name="os" value="windows"><span class="label">Windows</span></label>
        <label><input type="radio" name="os" value="macintosh"><span class="label">Macintosh</span></label>
        <label><input type="radio" name="os" value="linux" checked><span class="label">Linux</span></label>
    </span>
</p>

CSS

.segmented {
    display: inline-block;
}
.segmented .label {
    background-color: #eee;
    background-image: linear-gradient(to bottom, hsl(0,0%,98%) 0%,hsl(0,0%,77%) 100%);
    border: 1px #ccc;
    border-style: solid none solid solid;
    color: #777;
    cursor: pointer;
    float: left;
    padding: 8px;
    text-align: center;
    text-shadow: 1px 1px #fff;
    width: 80px;
}
.segmented :first-child .label {
    border-radius: 10px 0 0 10px;
}
.segmented :last-child .label {
    border-radius: 0 10px 10px 0;
    border-right-style: solid;
}
.segmented input {
    display: none;
}
.segmented input:checked + .label {
    background-color: #00f;
    background-image: linear-gradient(to bottom, hsl(214,90%,40%) 0%, hsl(214,90%,70%) 100%);    
    border-color: hsl(214, 90%, 60%);
    box-shadow: 3px 2px 10px rgba(0,0,0,.2) inset, -3px 2px 10px rgba(0,0,0,.2) inset;
    color: #fff;
    text-shadow: -1px -1px rgba(0,0,0,.3);
}

p {
    margin: 30px;
    text-align: center;
}

/* ---------------- */

.segmented .label {
    background-image: -moz-linear-gradient(top, hsl(0,0%,98%) 0%,hsl(0,0%,77%) 100%);
    background-image: -ms-linear-gradient(top, hsl(0,0%,98%) 0%,hsl(0,0%,77%) 100%);
    background-image: -webkit-linear-gradient(top, hsl(0,0%,98%) 0%,hsl(0,0%,77%) 100%);
    background-image: linear-gradient(to bottom, hsl(0,0%,98%) 0%,hsl(0,0%,77%) 100%);
}
.segmented input:checked + span {
    background-image: -moz-linear-gradient(top, hsl(214,90%,40%) 0%, hsl(214,90%,70%) 100%);
    background-image: -ms-linear-gradient(top, hsl(214,90%,40%) 0%, hsl(214,90%,70%) 100%);
    background-image: -webkit-linear-gradient(top, hsl(214,90%,40%) 0%, hsl(214,90%,70%) 100%);
    background-image: -webkit-linear-gradient(to bottom, hsl(214,90%,40%) 0%, hsl(214,90%,70%) 100%);
}