Positioning the label over the input, How-To?

Question

I'm trying to position the labels on the inputs but seems like they are not moving on them until i change their position to absolute (which i don't need).

Here is an example of my code:

  <label for="username">Your Email...</label>
  <input name="username" class="field" type="text" id="username" maxlength="40" />

Here is the CSS:

label {
    color:#373737;
    font-weight:bold;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:18px;
    margin-left:8px;
    margin-top:28px;
    }

And here is what i get:

The result

Now here is the thing I'm trying to duplicate and for some weird reason it works here but not on my side. The demo I'm trying to duplicate with my own CSS properties

score 2 · Accepted Answer · answered Sep 21 '11 at 08:35

2

The demo you linked to adds a negative margin-right to the <label> tag to pull it over the top of the <input>. You don’t have that in the CSS you’ve posted.

answered Sep 21 '11 at 08:35

Paul D. Waite

96,640
56
199
270

It doesn't matter cause the negative margin is set from the RIGHT side which i don't care about, What i actually need is to position it vertically over the input - not vertically. – Ricardo Sep 21 '11 at 09:23
@Ricardo: then you need to put your negative margin on the BOTTOM side. Because you haven’t put the CSS code for you `` as well, I can’t see how they’re positioned relative to one another, but here’s a fiddle showing the negative bottom margin working: http://jsfiddle.net/pauldwaite/EM7Pz/2/ – Paul D. Waite Sep 21 '11 at 09:57
It works bro, basically it was so simple i can't understand how i didn't though about that. Thanks.! – Ricardo Sep 21 '11 at 10:03
@Ricardo: no problem. Actually, now that I think of it, I’m not sure why it does work: I thought that by default, later elements would overlap earlier elements, rather than the other way around. Hey ho — if it works, all good. – Paul D. Waite Sep 21 '11 at 15:15

Tim B James · Answer 2 · 2011-09-21T09:29:15.330

2

I think basically what you are wanting to do already exists in many "Watermark" jQuery plugins.

Google "jQuery Watermark" and you will get loads of versions. Means that you don't need to play around with the hmtl/css/jquery yourself

EDITS

If you want to go down the route you are going, then just position the Labels with some jQuery. Check out this Fiddle for an example: http://jsfiddle.net/EM7Pz/1/ You will see that you position the labels absolutely, then with the jQuery, you change their positions to the position of the inputs that they need to be in. This way you can then change their color, size, etc... as you want and gives you more control than a Watermark plugin

I have also given the input an absolutely positioned style just to demonstrate that it doesn't matter where the input is, the label will always appear inside.

edited Sep 21 '11 at 09:29

answered Sep 21 '11 at 08:35

Tim B James

20,084
4
73
103

It’s still a good idea to have the ``s in there for accessibility, but you’re quite right, “watermarking” is what the OP is trying to do. For browsers that support it, the `placeholder` HTML5 attribute will do nicely: `` – Paul D. Waite Sep 21 '11 at 08:41
1

Yeah the placeholder of html5 is a good shout, and will be nice when fully supported! :D I think the OP should have a label already for the "username" part. – Tim B James Sep 21 '11 at 08:45
Seems like `placeholder` isn't the right thing for this task as i want to achieve the same result like the demo i linked to have. Actually 2 days ago this is the only thing i wanted to do but now i would like to add the color change on focus and the `keyup` functions and i can't find how to do that with the `placeholder`. Any help? – Ricardo Sep 21 '11 at 09:21
for some weird reason it doesn't work for me. Both the labels are on the same place one over the other when i change the position to absolute and the effect isn't like on your demo and it's really weird. – Ricardo Sep 21 '11 at 09:57

score 2 · Answer 3 · edited May 23 '17 at 11:54

2

See this related answer: Input with Watermark (css & Jquery).

As an addendum to that answer:

You can set the placeholder attribute equal to what you have in your label, then hide the label with CSS. This gets you exactly what you want, with minimal work.

edited May 23 '17 at 11:54

Community

1
1

answered Sep 21 '11 at 08:40

thirtydot

224,678
48
389
349

Maybe i don't fully understand the answer but seems like `placeholder` isn't the right thing for this task as i want to achieve the same result like the demo i linked to have. Actually 2 days ago this is the only thing i wanted to do but now i would like to add the color change on focus and the `keyup` functions and i can't find how to do that with the `placeholder`. Any help? – Ricardo Sep 21 '11 at 09:17
I think that the way you have it is worse than a simple standard `placeholder`. I recommend following the advice in my answer, or at least otherwise use the default `placeholder` functionality. – thirtydot Sep 21 '11 at 10:29

score 0 · Answer 4 · edited Feb 27 '15 at 08:24

To get:

label1    label2    label3
field1    field2    field3

enter HTML:

<div id="set">
<label for="field1">field1labeltext</label>
<input id="field1"></input>
<label for="field2">field2labeltext</label>
<input id="field2"></input>
<label for="field3">field3labeltext</label>
<input id="field3"></input>
</div>`

And set in the .css:

#set{
    position:relative;
    top: 30px;
    margin-bottom: 30px;
}
label{
    position:relative;
    display: inline-block;
    top:-30px;
    width: 0px;
}

Best regards,
Tim van Steenbergen,
Tieka.nl

Positioning the label over the input, How-To?

4 Answers4