在 HTML 输入字段中放置一个不可编辑的百分号

Question

我目前有一系列基于数字的输入字段框。我遇到的麻烦是在每个框的末尾添加一个“%”符号。最终我希望 % 符号对用户来说是不可编辑的，但是不确定如何去做。任何想法都是有益的

HTML

 <div class="ModifiedValues">
    <span class="valuePadding"><center><b>New Value</b></center></span>
    <span class="valuePadding"><input type="number" max="100" accuracy="2" min="0" id="inputRRPDiscount" style="text-align:left;"><br></span>
    <span class="valuePadding"><input type="number" max="100" accuracy="2" min="0" id="inputMargin" style="text-align:left;"><br></span>
    <span class="valuePadding"><input type="number" max="100" accuracy="2" min="0" id="inputMarkUp" style="text-align:left;"><br></span>
    <span class="valuePadding"><input type="number" max="100" accuracy="2" min="0" id="inputSalesDiscount" style="text-align:left;"><br></span>
</div>

CSS

 .ModifiedValues {
        position: absolute;
        left: 250px;
        top: 28px;
        color: #666;
        font-size: 12px;
        width: 85px;
}

.valuePadding {
        padding:5px 5px 5px 5px;
        display:block;
}

原文由 alex johnson 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

干得好

 .valuePadding {
  border: 1px inset #ccc;
}
.valuePadding input {
  border: none;
  padding:0px;
  outline: none;
}

 <span class="valuePadding"><input type="number" max="100" accuracy="2" min="0" id="inputRRPDiscount" style="text-align:left;">%</span>
<br>

原文由 Rajshekar Reddy 发布，翻译遵循 CC BY-SA 3.0 许可协议