我有一个文本输入,我想专门用于货币。在文本字段中,应显示[$ Other CAD]。“ $ Other”应左对齐,“ CAD”应右对齐,我目前在“ $ Other”和“ CAD”之间只有一堆空格。对于不同的浏览器等而言,这不是理想的选择。是否有一种简单的方法来仅使占位符的“ CAD”部分正确对齐,以便无论浏览器如何,它都始终适合?另外,我可以为占位符设置两种不同的文本颜色吗?例如,将“ $”和“ CAD”设为灰色,将“其他”设为黑色
<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>
最佳答案
您不能使用占位符来做到这一点,您必须使用javascript创建一个伪造的效果。您必须添加三个元素:一个用于$
,一个用于Other
和一个用于CAD
。然后,您可以设置它们的样式并在输入中使用position: absolute;
放置它们,以创建伪造的占位符。 (不要忘记:您不能将html元素放入输入中,因此您必须将输入和三个元素包装到另一个元素中,以便根据它放置所有内容)。
之后,当有人单击或移动键盘时,您将不得不使用JavaScript隐藏该假占位符。
尝试一些操作,如果需要帮助,请返回此处向我们展示您的代码。