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 % sy

Answer 1

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: '%';
}

  New Value