title: Overlay text over a input in HTML/CSS
body: <p>I'm building a website for my high school so students to view their class schedules online. Each class has a different background color. On the main page, I do this by changing the background color of a <code>&lt;td&gt;</code> tag.</p>
  
  <p>On the settings page, I want to allow users to change this color, using a color input.</p>
  
  <p>I want to overlay text over each of these inputs (the users class name, like 'math' for that block) so the user can make sure that they are choosing a readable color. It also is a cool way to show which input goes to each block. </p>
  
  <p>When I include a <code>&lt;span&gt;</code>, it goes next to the input, not over it. Any ideas? Thanks!</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>.colorInput {
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-top: 20px;
      background-color: transparent;
      border: solid 0px;
      height: 50px;
      width: 100px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form&gt;
      &lt;table&gt;
          &lt;tr&gt;
              &lt;input type="color" class="colorInput" id="color1" /&gt;
              &lt;input type="color" class="colorInput" id="color2" /&gt;
              &lt;input type="color" class="colorInput" id="color3" /&gt;
              &lt;input type="color" class="colorInput" id="color4" /&gt;
              &lt;input type="color" class="colorInput" id="color5" /&gt;
              &lt;input type="color" class="colorInput" id="color6" /&gt;
              &lt;input type="color" class="colorInput" id="color7" /&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Example: </p>
  
  <p><a href="https://i.stack.imgur.com/T6JzU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/T6JzU.png" alt="Current Page"></a></p>