Skip to content

Instantly share code, notes, and snippets.

@gr2m
Created March 12, 2010 18:32
Show Gist options
  • Save gr2m/330597 to your computer and use it in GitHub Desktop.
Save gr2m/330597 to your computer and use it in GitHub Desktop.
.mad-lips label {
white-space: nowrap;
padding: 0 0 .5em;
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
zoom: 1;
*display: inline;
}
.mad-lips input {
font: inherit;
background: transparent;
border: none;
border-bottom: 1px solid #111;
outline: 0;
display: block;
}
.mad-lips label span {
font-size: .8em;
line-height: 1em;
opacity: .7;
filter: alpha(opacity = 70);
}
<form action="" method="get" accept-charset="utf-8">
<p class="mad-lips">
Hello, my name is
<label>
<input type="text" name="firstname" value="" />
<span>firstname</span>
</label>
<label>
<input type="text" name="lastname" value="" />
<span>lastname</span>
</label>
and I'm writing you today to learn more about the <strong>2003 HONDA ACCORD LX</strong> listed for <strong>$8,455</strong>. I live in the
<label>
<input type="text" name="zip" value="" />
<span>ZIP</span>
</label>
area and I would like to hear back from you soon and learn more about this vehicle. Please call me at
<label>
<input type="text" name="zip" value="" />
<span>my phone number</span>
</label>
at your earliest convenience.
</p>
<p><input type="submit" value="submit" /></p>
</form>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment