Answer field for games with CSS and jQuery

I was looking for a good approach for an answer field for a JavaScript based mobile game. The answer should be a text input from the user. One HTML input element turned out to be a bad solution especially on mobiles. So I came up with a one input field per letter solution.

The fields are created dynamically depending on the correct answer:

for(var i=0; i<correct_answer.length; i++){
    $('#answer_con').append('<input class="quiz-input" size="1" data-position="'+i+'"/>');
}   

It's recommended to add the following attributes to the input field, but I couldn't see any difference with them: autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"

The CSS for one input field looks like this:

input.quiz-input {
  border: none;
  width: 1.3ch;
  background: 
    repeating-linear-gradient(90deg, 
        dimgrey 0, 
        dimgrey 1ch, 
        transparent 0, 
        transparent 1.3ch) 
      0 100%/100% 42px no-repeat;
  font: 5ch consolas, monospace;
  letter-spacing: .3ch;
  color: transparent;text-shadow: 0 0 0 dimgrey;
  border-radius: 0;
  overflow: hidden;
  min-width: 1px;
  padding: 0;
}
input.quiz-input.lettered{
  background: 
    repeating-linear-gradient(90deg, 
        dimgrey 0, 
        dimgrey 1ch, 
        transparent 0, 
        transparent 1.3ch) 
      0 100%/100% 2px no-repeat;
}
input.quiz-input:focus {
  outline: none;
  color: transparent;text-shadow: 0 0 0 red;
  background: 
    repeating-linear-gradient(90deg, 
        red 0, 
        red 1ch, 
        transparent 0, 
        transparent 1.3ch) 
      0 100%/100% 2px no-repeat;
}

You can find a working example on jsFiddle: https://jsfiddle.net/vienom/v1wLvqtv/

It's designed for mobiles, so there are some flaws with fast keyboard input on desktop computers.