将标签放在输入上,如何操作?

问题描述:

我试图在输入上定位标签,但似乎他们没有在他们身上移动,直到我将他们的位置更改为absolute(我不需要)。将标签放在输入上,如何操作?

这里是我的代码示例:

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

这里是CSS:

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

,这里是我所得到的:

The result

现在,这里是我试图复制的东西,以及一些奇怪的原因,它在这里工作,但不在我的工作IDE。 The demo I'm trying to duplicate with my own CSS properties

您链接到的演示将标记的负margin-right添加到<input>的顶部。你没有在你发布的CSS中。

+0

这并不重要,因为负边距是从右侧设置的,我不关心,我实际需要的是将其垂直放置在输入上 - 而不是垂直放置。 – Ricardo

+0

@Ricardo:那么你需要把你的负边缘放在底部。因为你还没有为你编写''的CSS代码,所以我看不到它们相对于另一个的位置,但是这里有一个提示负底部边距工作的小提琴:http://jsfiddle.net/pauldwaite/EM7Pz/2/ –

+0

它的工作兄弟,基本上这是如此简单,我不明白我怎么没有,虽然这一点。谢谢。! – Ricardo

我想基本上你想做的事情已经存在于许多“水印”jQuery插件中。

谷歌“jQuery水印”,你会得到大量的版本。就是说你不需要玩的HMTL/CSS/jQuery的自己

EDITS

如果你想下去,你要去的路线,那么就定位与一些jQuery的标签。看看这个小提琴的例子:http://jsfiddle.net/EM7Pz/1/ 你会看到,你绝对定位标签,然后与jQuery,你改变他们的立场,他们需要在输入的位置。这样,你可以改变他们的颜色,大小等...只要你想和给你比水印插件更多的控制

我也给了输入一个绝对定位的风格只是为了说明它并不重要的地方输入,标签将总是出现在里面。

+0

将'

+1

是的,HTML5的占位符是一个很好的留言,在完全支持时会很好! :D我认为OP应该有一个标签已经为“用户名”部分。 –

+0

似乎“占位符”不适合执行此任务,因为我想获得与链接的演示相同的结果。实际上2天前,这是我唯一想做的事情,但现在我想添加焦点和'键控'功能的颜色变化,我找不到如何用'placeholder'做到这一点。任何帮助? – Ricardo

看到这个相关的答案:Input with Watermark (css & Jquery)

作为附录这个问题的答案:

您可以设置placeholder属性等于你在你的label什么,然后隐藏label与CSS。这使你完全得到你想要的,只需很少的工作。

+0

也许我不完全理解答案,但似乎像'占位符'不是这个任务的正确的事情,因为我想达到像我链接的演示一样的结果。实际上2天前,这是我唯一想做的事情,但现在我想添加焦点和'键控'功能的颜色变化,我找不到如何用'placeholder'做到这一点。任何帮助? – Ricardo

+0

我认为你拥有它的方式比简单的标准'占位符'更糟糕。我建议在我的回答中遵循建议,或者至少使用默认的“占位符”功能。 – thirtydot

要获取:

label1 label2 label3 
field1 field2 field3 

输入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>` 

并在设定的CSS:

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

最好的问候,
添面包车斯滕贝亨,
Tieka 。nl