title: How to make input invisible but not hidden?
body: <p>I'm currently trying to create a fully working sudoku web page and I'm having a little trouble styling. I'm kind of a noob to the whole HTML CSS game. Here is a code snippet of what I currently have.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.soduku {
    display: block;
    justify-content: center;
  }
  
  .sudoku__board {
    margin-left: auto;
    margin-right: auto;
    height: 500px;
    width: 40%;
    border-collapse: collapse;
    border: 2px solid black;
  }
  
  .sudoku__row,
  .sudoku__space {
    border: 2px dotted gray;
  }
  
  .sudoku__row:nth-child(3n) {
    border-bottom: 2px solid black;
  }
  
  .sudoku__space:nth-child(3n+1) {
    border-left: 2px solid black;
  }
  
  tr: nth-child(3n+0) {
    border-left: 3px solid black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="sudoku"&gt;
    &lt;table class='sudoku__board'&gt;
      &lt;tr class="sudoku__row"&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr class="sudoku__row"&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr class="sudoku__row"&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr class="sudoku__row"&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr class="sudoku__row"&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr class="sudoku__row"&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr class="sudoku__row"&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr class="sudoku__row"&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr class="sudoku__row"&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
        &lt;th class="sudoku__space"&gt;&lt;input type="text" maxlength="1"&gt;&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Basically this creates almost exactly what I'm looking for except the inputs are too wide and chunky and very visible. I'm essentially trying to find an option that would be equivalent to if type were hidden except the user can still write within the box and have the number visible. Any ideas or references to helpful pages is appreciated.</p>