时间戳

首页 > 解决方案 > 如何在输入文本中添加“€”符号

html - 如何在输入文本中添加“€”符号

问题描述

我想在输入字段的右侧添加一个“€”符号，我在网上看到了一些示例，但遗憾的是它们不起作用，因为我已经有一个输入标签。有没有办法用已经在标签中的标签来做到这一点利用？

继承人的HTML代码：

<div class="inputfield">
       <label> Example </label>
       <input id="idExample" type="number" name="input" placeholder="0.00" pattern="[0-9]+" required>
</div>

如果你想看看我有什么 CSS：

.inputfield input {
    border-radius: 10px;
    width: 100px;
    margin-left: 100px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 5px;
}

标签： htmlcss

解决方案

我会使用伪元素，主要是因为如果您将来需要更改货币，您可以使用 javascript 设置数据属性。

输入没有伪元素，所以我需要将输入包装在span. 然后我可以position: absolute结合使用transform: translate将€放在我想要的地方。

.inputfield input {
  border-radius: 10px;
  width: 100px;
  margin-left: 100px;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 5px;  
}

.inputfield span {
  position: relative;
}

.inputfield span[data-currency]::after {
  position: absolute;
  content: attr(data-currency);
  right: 1em;
  top: 50%;
  transform: translate(-100%, -50%);
}
<div class="inputfield">
  <label> Example </label>
  <span data-currency="€"><input id="idExample" type="number" name="input" placeholder="0.00" pattern="[0-9]+" required></span>
</div>

推荐阅读