Limit the number of characters in a separate input field for each character

Question

I have an input field and would want to give it a look and feel of a character-by-character box field (image below).

My HTML and CSS are written below. They

Answer 1

If you are able to add another, wrapping element around the input then you can apply the background to that instead:

#wrapper {
  box-sizing: border-box;
  background-image: url("http://3.bp.blogspot.com/-4oAWWCcNNz4/Tjr3nKNyVUI/AAAAAAAAPLU/Pouua-pNsEY/s1600/sq.gif");    
  width: 120px;
  height: 20px;
  background-size: 20px;
  padding-left: 7px;
}
#text {
  background: none;
  display: block;
  width: 120px;
  padding: 3px 0 0;
  border: none;
  font-family: monospace;
  font-size: 13px;
  letter-spacing: 12px;
}

The input element will then spill out of the container slightly, which is something to be aware of if there is other content flowing around it.