Labels as Containers

Using labels as containers of their inputs to provide for styling and positioning.

by Travis Almand

HTML

<p>This is just a typical form with an awful color scheme to easily show our purpose.</p>

<form id="form1" action="">
    <label id="firstName">First Name: <input type="text" /></label>
    <label id="email">Email Address: <input type="text" /></label>
</form>

<p>What we've done is wrapped the inputs with their labels and then applied some styles to those labels. In this way you can click anywhere within the green area to put focus on that input. It even allows for some hover action on the labels as well. In some cases this is much easier to accomplish than clicking inside the input for focus, especially mobile devices. Simply put, the label becomes more like a button.</p>

<p>There are other useful things we can do with this method.</p>

<p>Say we have a form like this:</p>

<form id="form2" action="">
    Check1: <input type="checkbox" />
    Check2: <input type="checkbox" />
    Check3: <input type="checkbox" />
</form>

<p>You'll notice that it is required to click on a checkbox itself to get it checked.</p>

<p>Using labels as containers we can use CSS to position the checkboxes where we want inside the form.</p>

<form id="form3" action="">
    <label id="check1">Check1: <input type="checkbox" /></label>
    <label id="check2">Check2: <input type="checkbox" /></label>
    <label id="check3">Check3: <input type="checkbox" /></label>
</form>

<p>And again, each one of those labels acts as a button for the checkbox. This time we put a pointer cursor on there to make even more like a clickable button.</p>

CSS

p {
    margin: 10px;
}

#form1 {
    background: #8b9ec9;
    background: -moz-linear-gradient(top,  #8b9ec9 0%, #3f4c6b 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8b9ec9), color-stop(100%,#3f4c6b));
    background: -webkit-linear-gradient(top,  #8b9ec9 0%,#3f4c6b 100%);
    background: linear-gradient(top,  #8b9ec9 0%,#3f4c6b 100%);
    border: 1px solid black;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    display: block;
    margin: 20px auto;
    padding: 20px 10px;
    width: 400px;
}
#form1 label {
    background: #c9de96;
    background: -moz-linear-gradient(top,  #c9de96 0%, #8ab66b 44%, #398235 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c9de96), color-stop(44%,#8ab66b), color-stop(100%,#398235));
    background: -webkit-linear-gradient(top,  #c9de96 0%,#8ab66b 44%,#398235 100%);
    background: linear-gradient(top,  #c9de96 0%,#8ab66b 44%,#398235 100%);
    border: 1px solid black;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    cursor: pointer;
    display: block;
    font-size: 18px;
    margin: 8px auto;
    padding: 8px;
    text-align: right;
    width: 90%;
}
#form1 label:hover {
    background: #CCC;
}
#form1 input {
    font-size: 18px;
    padding: 4px;
    width: 230px;
}

#form2 {
    border: 1px solid black;
    display: block;
    margin: 20px auto;
    padding: 20px 10px;
    width: 300px;
}

#form3 {
    border: 1px solid black;
    display: block;
    height: 200px;
    margin: 20px auto;
    position: relative;
    width: 300px;
}
#form3 label {
    border: 1px solid black;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    cursor: pointer;
    padding: 10px 20px;
    position: absolute;
}
#form3 #check1 {
    left: 10px;
    top: 10px;
}
#form3 #check2 {
    left: 90px;
    top: 80px;
}
#form3 #check3 {
    bottom: 10px;
    right:...