<input> 中的右对齐占位符答案

【问题标题】：right aligned placeholder in <input><input> 中的右对齐占位符
【发布时间】：2018-10-09 20:32:40
【问题描述】：

我有一个专门用于货币的文本输入。在文本字段内，应该说 [$Other CAD]。“$Other”应该左对齐，“CAD”应该右对齐，我目前在“$Other”和“CAD”之间只有一堆空格.这对于不同的浏览器等并不理想。有没有一种简单的方法可以让占位符的“CAD”部分正确对齐，这样无论浏览器如何，它都始终适合？另外，我可以为占位符设置两种不同的文本颜色吗？例如，灰色的“$”和“CAD”，黑色的“Other”

<style>
  .donation-amount-input {
    height: 65px;
    font-size: 34px;
  }
  .form-control::placeholder {
    font-size: 34px;
  }
  #S {
    color: #aaaaaa;
    position: absolute;
    font-size: 36px;
    padding-left: 10px
  }
  #Other {
    position: absolute;
    font-size: 36px;
    padding-left: 35px;
  }
  #CAD {
    color: #aaaaaa;
    position: absolute;
    font-size: 36px;
    padding-left: 40%;
  }
</style>
<body>
  <p onclick="fakePlaceholder()" id="S">$</p>
  <p onclick="fakePlaceholder()" id="Other">Other</p>
  <p onclick="fakePlaceholder()" id="CAD">CAD</p>
  <input 
  type="text" 
  onselect="fakePlaceholder()"
  class="form-control donation-amount-input" 
  id="other-amount"
  />
</body>
<script>
  function fakePlaceholder() {
    var S = document.querySelector('S');
    S.style.display = 'none';
    var Other = document.querySelector('Other');
    Other.style.display = 'none';
    var CAD = document.querySelector('CAD');
    CAD.style.display = 'none';
  }
</script>

【问题讨论】：

标签： html css formatting placeholder

【解决方案1】：

你不能用占位符来做到这一点，你必须用 javascript 创建一个假的来获得效果。您必须添加三个元素：一个用于$，一个用于Other，一个用于CAD。然后，您可以设置它们的样式并在输入中使用position: absolute; 定位它们以创建假占位符。（不要忘记：您不能将 html 元素放在输入中，因此您必须将输入和三个元素包装到另一个元素中，以便根据它定位所有内容）。

之后，当有人点击或使用键盘移动时，您将不得不使用 javascript 隐藏这个假占位符。

尝试一下，如果您需要帮助，请返回这里向我们展示您的代码。

【讨论】：

感谢提示