将标签放在输入上,如何操作?
我试图在输入上定位标签,但似乎他们没有在他们身上移动,直到我将他们的位置更改为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;
}
,这里是我所得到的:
现在,这里是我试图复制的东西,以及一些奇怪的原因,它在这里工作,但不在我的工作IDE。 The demo I'm trying to duplicate with my own CSS properties
您链接到的演示将标记的负margin-right
添加到<input>
的顶部。你没有在你发布的CSS中。
我想基本上你想做的事情已经存在于许多“水印”jQuery插件中。
谷歌“jQuery水印”,你会得到大量的版本。就是说你不需要玩的HMTL/CSS/jQuery的自己
EDITS
如果你想下去,你要去的路线,那么就定位与一些jQuery的标签。看看这个小提琴的例子:http://jsfiddle.net/EM7Pz/1/ 你会看到,你绝对定位标签,然后与jQuery,你改变他们的立场,他们需要在输入的位置。这样,你可以改变他们的颜色,大小等...只要你想和给你比水印插件更多的控制
我也给了输入一个绝对定位的风格只是为了说明它并不重要的地方输入,标签将总是出现在里面。
将'
是的,HTML5的占位符是一个很好的留言,在完全支持时会很好! :D我认为OP应该有一个标签已经为“用户名”部分。 –
似乎“占位符”不适合执行此任务,因为我想获得与链接的演示相同的结果。实际上2天前,这是我唯一想做的事情,但现在我想添加焦点和'键控'功能的颜色变化,我找不到如何用'placeholder'做到这一点。任何帮助? – Ricardo
看到这个相关的答案:Input with Watermark (css & Jquery)。
作为附录这个问题的答案:
您可以设置placeholder
属性等于你在你的label
什么,然后隐藏label
与CSS。这使你完全得到你想要的,只需很少的工作。
要获取:
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
这并不重要,因为负边距是从右侧设置的,我不关心,我实际需要的是将其垂直放置在输入上 - 而不是垂直放置。 – Ricardo
@Ricardo:那么你需要把你的负边缘放在底部。因为你还没有为你编写''的CSS代码,所以我看不到它们相对于另一个的位置,但是这里有一个提示负底部边距工作的小提琴:http://jsfiddle.net/pauldwaite/EM7Pz/2/ –
它的工作兄弟,基本上这是如此简单,我不明白我怎么没有,虽然这一点。谢谢。! – Ricardo