Question

以下是我目前的情况：

<input type="text" name="amount" style="height:40px;width:200px;font-size:23px;text-align:center;" value="${$amount}" />

这是我特别谈论的部分：

value="${$amount}"

默认情况下会显示$10.00这就是我想要的。但是，我不希望用户能够编辑$符号。它应该始终保持在那里我不希望随表格提交美元符号。它只是出现在外面，以便用户知道货币。

Answer 1

您可以将美元符号作为输入的背景图像，并留下一些填充左侧，以便文本不会覆盖背景图像。

Answer 2

您可以使用伪元素。

DEMO

<label>Label</label>
<span><input type="text" placeholder="Placeholder"></span>

input {
    padding: 10px;
    padding-left: 15px;
    margin-left: 10px;
}

span:before {
    content: "$";
    position: relative;
    left:10px;
    margin-right: -15px;
}

由于您无法在输入

上生成伪元素，因此需要在输入周围使用包装元素

Answer 3

您最好的选择是将标志放在input元素之外。

Answer 4

试试这个：http://jsfiddle.net/mgmBE/45/

HTML：

<div class="input-container">
<input type="text" value="amount" name="" />
<span class="unit">$</span>
</div>

CSS：

.input-container {
    position: relative;
    width: 100px;
}
    .input-container input {
    width: 100%;
}

.input-container .unit {
    position: absolute;
    top: 3px;
    right: -3px;
    background-color: grey;
    color: #ffffff;
    padding-left: 5px;
    width:20px;
}

Answer 5

Pseudo Element是最容易放置的选择。

<label>Input:</label><span><input type="text" placeholder="Placeholder"></span>

CSS

input {
    padding: 10px;
    margin-left:15px;
}

span:before {
    content: "$";
    margin-right:-15px;
    position: relative;
    left:10px;
}

将“未使用”文本添加到输入字段框？

5 个答案: