Hide label when focus on input

Here is a way to hide a label when you focus on an input. There are many ways to do that, but I’ve used a label positioned absolute over the input, and some jQuery to hide and show it.

Demo

1. The HTML

<form>
  <div class="form-row">
    <label for="click_here" class="label-hide">Click here</label>
    <input type="text" id="click_here" class="label-over"/>
  </div>
</form>

2. The CSS

.form-row { position: relative; }
.label-hide {
  position: absolute;
  left: 10px;
  top: 3px;
  font-family: Arial;
}
input {
  height: 15px;
  line-height: 15px;
  padding: 5px;
  border-radius: 3px;
  border: 1px solid #cecece;
}

3. The jQuery

$(function() {
  $('.label-over').focus(function() {
    $('label.label-hide[for="' + $(this)[0].id + '"]').hide();
  }).blur(function() {
    if($(this).val() == '') {
      $('label.label-hide[for="' + $(this)[0].id + '"]').show();
    }
  });
});
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s