Question

查看此网站：http://www.gofundme.com/sign-up/他们有一个很好的“金额”输入，您可以在其中更改$£€符号。我已经向我解释了（谢谢你们）他们如何用javascript去做。显然它会改变输入的标签。

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

Answer 1

他们的普通<div>样式看起来像一个文本框，而<label>后面跟着一个无边框<input>。

您可以使用Firebug查看其工作原理。

Answer 2

我认为你在谈论占位符使用它：

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

Answer 3

他们在你给出的方面所采取的方法是将标签和输入包装在div中，将div设置为输入字段。标签和输入字段在该div内只是彼此相邻。

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

我将举例说明第二个选项：

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

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

当然，px值仅用于示例，需要替换给定情况的适当值。此外，您还可以直接在标签中添加背景图像，而不是在标签内添加img。

使用css总是有很多不同的方法来处理这种情况。

Answer 4

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

Answer 5

这是他们正在使用的代码：

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

我会复制它。

如何使标签出现在输入字段内？

5 个答案: