In-Field Labels Don't Line Up With Input Text

Question

I'm using Viget's In-Field Labels plugin on a form, but even though the label and input have the same font size, same line height, same height, same padding, same everything, the input and label text does not line up. The input text is one pixel lower than the label text.

HTML:

<div class="fieldgroup">
    <label for="name">Name</label>
    <input type="text" id="name" name="name">
</div><!--/.fieldgroup-->

CSS:

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: Arial;
}
.fieldgroup {
  position: relative;
}
input[type='text'],
label {
  padding: 5px;
  font-size: 16px;
  line-height: 16px;
  margin: 0;
  height: 30px;
  color: #fff;
  display: block;
}
input[type='text'] {
  border: none;
  background: green;
}

The plugin sets the label's position to absolute and the top and left properties to 0.

Here's a fiddle.

What am I missing here?

Answer 1

It's possible to do this using almost 100% CSS and avoid all the layout flow issues caused by position: absolute;

jsFiddle demo

The trick is to wrap the LABEL around the text and INPUT element. Put the text inside of an element that can be given display: inline-block; margin-right: -100%;. This puts the text directly under the INPUT, which is given a transparent background so the text is visible through the INPUT.

Some Javascript is necessary to make the INPUT background opaque when the field has user input. There's no way around this at the moment… CSS can't "detect" a non-empty INPUT element.