title: Html transparent text input box
body: <p>I have the following code example:</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>&lt;style&gt;
  { margin: 0; padding: 0; }
  html, body {
   margin: 0;
   height: 100%;
   width: 100%;
      overflow:hidden;
   background-size: 100% 100%;
      background-repeat: no-repeat;
  }
  .input {
   margin: 0;
   padding-top:0px;
   padding-bottom:0px;
   padding-left:0px;
   padding-right:0px;
   opacity: 0.6;
   filter: alpha(opacity=60); /* For IE8 and earlier */
   background-color:#000;
    border:none;
    outline:none;
  }
  #input {
    opacity: 0.6;
   filter: alpha(opacity=60); /* For IE8 and earlier */
    border:none;
    outline:none;
    }
  .bgDiv {
   margin: 0;
   padding-top:0px;
   padding-bottom:0px;
   padding-left:0px;
   padding-right:0px;
   z-index:1;
  }
  .mainDiv {
   margin: 0;
   padding-top:0px;
   padding-bottom:0px;
   padding-left:0px;
   padding-right:0px;
   z-index:3;
  }
  &lt;/style&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="bgDiv" name="bgDiv" class="bgDiv"&gt;
  &lt;img src="http://wallpapercave.com/wp/2u5OrmL.png" style="background-image: url('http://wallpapercave.com/wp/2u5OrmL.png'); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;"&gt;
  &lt;/div&gt;
  &lt;div id="mainDiv" name="mainDiv" class="mainDiv"&gt;
  &lt;form id="iform" name="iform" action="index.php" method="post"&gt;
  &lt;input type="text" maxleth="18" align="center" id="input" name="input" class="input" placeholder="placeholder" style="border:0;outline:none;width:100%;height:100%;font-size:98px;text-align: center;" autocomplete="off" autofocus&gt;
  &lt;/form&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am attempting to make the text input have a transparent background, so the user can see the underlying background image of the page. While at the same time, still be able to see text typed in the box.</p>
  
  <pre><code>input[type=text] {
  background: transparent;
  border: none;
  </code></pre>
  
  <p>}
  background-color:rgba(0,0,0,0);</p>
  
  <p>none of those seem to work or have any effect. Please help.</p>