title: Place a non editable percentage sign within a HTML input field
body: <p>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</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="ModifiedValues"&gt;
      &lt;span class="valuePadding"&gt;&lt;center&gt;&lt;b&gt;New Value&lt;/b&gt;&lt;/center&gt;&lt;/span&gt;
      &lt;span class="valuePadding"&gt;&lt;input type="number" max="100" accuracy="2" min="0" id="inputRRPDiscount" style="text-align:left;"&gt;&lt;br&gt;&lt;/span&gt;
      &lt;span class="valuePadding"&gt;&lt;input type="number" max="100" accuracy="2" min="0" id="inputMargin" style="text-align:left;"&gt;&lt;br&gt;&lt;/span&gt;
      &lt;span class="valuePadding"&gt;&lt;input type="number" max="100" accuracy="2" min="0" id="inputMarkUp" style="text-align:left;"&gt;&lt;br&gt;&lt;/span&gt;
      &lt;span class="valuePadding"&gt;&lt;input type="number" max="100" accuracy="2" min="0" id="inputSalesDiscount" style="text-align:left;"&gt;&lt;br&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.ModifiedValues { 
          position: absolute;
          left: 250px;
          top: 28px;
          color: #666;
          font-size: 12px;
          width: 85px;
  }   
  
  .valuePadding { 
          padding:5px 5px 5px 5px;
          display:block;
  }
  </code></pre>