iOS Forms

by XTREME104

HTML

<form>
    Slider <input type="range" max="100"/>
</form>

<h1>Header</h1>
<h2>Details</h2>
<header class="navbar movable">
    <button class="back"></button>
    <h1>Default</h1>
    <button class="next"></button>
</header>
<header class="navbar movable black">
    <button class="back"></button>
    <h1>Black</h1>
    <button class="next"></button>
</header>
<header class="navbar movable translucent">
    <button class="back"></button>
    <h1>Translucent</h1>
    <button class="next"></button>
</header>

<form>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <div class="checkbox">
        <input type="checkbox">6</input>
    </div>
</form>

<form>
    <input type="radio" name="89">8</input>
    <input type="radio" name="89">9</input>
</form>

CSS

body {
    font: normal 14px/16px Helvetica, Sans-serif;
    padding: 0;
    background: #cbd2d8;
    background: -webkit-gradient(linear, left top, right top, from(#c5ccd4), color-stop(.7, #c5ccd4), color-stop(.7, #cbd2d8), to(#cbd2d8));
    background-size: 8px 100%;
    -webkit-user-select: none;
}

header.navbar {
    display: -webkit-box;
    height: 30px;
    padding: 6px 6px;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#b2bbca), color-stop(0.25, #a7b0c3), color-stop(0.5, #909cb3), color-stop(0.5, #8593ac), to(#73839f));
    border-top: 1px solid #cdd5df;
    border-bottom: 1px solid #2d3642;
}

header.navbar:not(.movable) {
    position: fixed;
    top: 0;
}

header.navbar.black, header.navbar.translucent {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(99,99,99)), color-stop(0.25, rgb(66,66,66)), color-stop(0.5, rgb(32,32,32)), color-stop(0.5, rgb(0,0,0)));
    border-top: 1px solid #858585;
    border-bottom: 1px solid #858585;
}

header.navbar.translucent {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(99,99,99,.6)), color-stop(0.25, rgba(66,66,66,.6)), color-stop(0.5, rgba(32,32,32,.6)), color-stop(0.5, rgba(0,0,0,.6)));
}

header.navbar > h1 {
    -webkit-box-flex: 1;
    text-align: center;
    font: bold 20px/32px Helvetica, Sans-serif;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
    color: white;
}

h1 {
    font-size: 20px;
    font-weight: bold;
    line-height:  26px;
    text-shadow: 0 1px 0 white;
    color: #555;
}

h2 {
    font-size: 16px;
    line-height: 22px;
    text-shadow: 0 1px 1px white;
    color: #666;
    text-align: center;
}

header.navbar > button {
    border: solid 1px #54617d;
    border-color: #484e59 #54617d #4c5c7a #54617d; 
    padding: 0 10px;
    font-size: 12px;
    font-weight: bold
    margin-top: 1px;
    margin-bottom: 1px;
    height: 100%;
    border-radius: 5px;
    background-image: -webkit-gradient(linear, left...