如何让标签显示在输入栏内？

看着这个网站：http://www.gofundme.com/sign-up/他们有一个很好的'金额'输入，您可以在其中更改$£€符号。我已经向我解释过（谢谢你们），他们如何用javascript来解决这个问题。显然它会改变输入的标签。如何让标签显示在输入栏内？

所以我的问题是，他们如何获得他们的符号（这是字段标签）内的输入字段？

来源

2011-07-07 Crazy Sarah

这是不是里面输入。它在一个div里面也有输入 – Jawad

– Jawad

他们在你给出的一面作为例子的方法是将标签和输入封装在一个div中，将div的样式设置为输入字段。标签和输入字段在该div内简单地坐在一起。

另外，你也可以绝对地定位标签，并在输入字段中添加一个填充左边，就像这样你不需要假的div。

我给了第二个选项的例子：

HTML: 
<form> 
    <div class="holder"> 
     <label> 
      <img src="yourimagesrc" width="20" height="20" alt="Your Image" /> 
     </label> 
     <input type="text" ... /> 
    </div> 
</form> 

CSS: 
.holder { 
    position: relative; 
} 

.holder label { 
    position: absolute; 
    left: 2px; 
    top: 2px; 
    width: 20px; 
    height: 20px; 
} 

.holder input { 
    padding: 2px 2px 2px 25px; 
}

当然的像素值只是为了举例的缘故，需要更换与给定的情况下适当的值。另外，不是在标签内添加img，而是直接将背景图像分配给标签。

总是有很多不同的方式来处理与CSS的情况。

来源

2011-07-07 15:57:17 ximi

嘿，那里，谢谢你的快速回答。我喜欢你的第二个建议，但我不太确定我绝对的位置 - 我会去阅读并找出:) –

而且你绝对会将标签“RELATIVE”定位到？你仍然需要一个div！ – Jawad

这取决于各自的文档结构。你可能需要一个额外的div，但这不是给定的。他还可以根据周围的表单或字段集等绝对定位标签。 – ximi

他们有一个普通的<div>风格看起来像一个文本框和一个<label>后面跟着一个无边框<input>里面。

你可以看到它是如何工作的使用Firebug。

来源

2011-07-07 15:57:28 SLaks

嗨，感谢您的建议。我确实有萤火虫，但我很惭愧地说我发现这一切都有点混乱。我是一个新手:( –

）您可以在HTML选项卡中看到HTML元素，并且您可以在右侧看到他们的样式， – SLaks

它实际上不在输入栏内。如果您查看源代码（我使用了Chrome开发人员工具），您会看到整个事情是一个div，标签包含货币符号，并且实际的文本输入字段在它旁边。

来源

2011-07-07 15:58:52

这是他们所使用的代码：我只想把它复制

<div class="amt_box bg_white"> 
    <label class="currency-display">$</label> 
    <input class="big-field" type="text" 
     tabindex="1" value="" name="Funds[goalamount]"> 
</div>

。

来源

2011-07-07 16:05:18 Phil

我想你所谈论的占位符使用此：

<input type="text" placeholder="Type here" />

来源

2012-09-25 14:47:46

如何让标签显示在输入栏内？

回答

相关问题