在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; 
} 

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>

Answer 2

我禾将样式设置为你的输入样式，然后从输入中删除样式。然后，您可以使用after伪选择添加比例：

.input-holder { 
 
    border: 1px solid #cccccc; 
 
    display: inline-block; 
 
    padding: 5px; 
 
} 
 
.input-holder > input { 
 
    border: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
    outline:none; 
 
} 
 
.input-holder:after { 
 
    content: '%'; 
 
}

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