Place a non editable percentage sign within a HTML input field

Question

I currently have a series of input field boxes which are numerical based. The trouble I am having is adding a '%' symbol at the end of each box. Ultimately i want the % symbol to be non editable to the user however unsure how to go about it. Any ideas would be beneficial

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

Here you go

.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

I would style your spans to look like your inputs and then remove the styles from the input. You can then use the after psuedo selector to add the percentage:

.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>

Answer 3

Assuming that you're going to put these elements within a relative positioned div, you could handle it this way:

HTML:

<div class="col-md-6">
        <span id="percent-sign">%</span>
        <input type="number" min="0" max="100">
</div>

CSS:

<style>
    #percent-sign {
        top: 8px;
        left: 45px;
        color: #555;
        position: absolute;
        z-index: 1;
    }
</style>

Notice that I'm using Bootstrap grid classes (col-md-6), which already gave that div relative positioning. If that's not your case, set relative positioning to your div.