Html transparent text input box

Question

I have the following code example:

<style>
{ 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;
}
</style>

<div id="bgDiv" name="bgDiv" class="bgDiv">
<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;">
</div>
<div id="mainDiv" name="mainDiv" class="mainDiv">
<form id="iform" name="iform" action="index.php" method="post">
<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>
</form>
</div>

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.

input[type=text] {
background: transparent;
border: none;

} background-color:rgba(0,0,0,0);

none of those seem to work or have any effect. Please help.

Answer 1

try with

            background-color: transparent;

     input {
        background-color: transparent;

    }
    .WRAPPER {
        background-color: #000;
        height: 575px;
        width: 975px;
        background-image: url("http://wallpapercave.com/wp/2u5OrmL.png");
        top: auto;
        margin: -8px;
    }
    body {
        
        background-color: #000;
        background-image: url("http://wallpapercave.com/wp/2u5OrmL.png");
    }
    #email {
        background-color:rgba(0, 0, 0, 0);
        color:white;
        border: none;
        outline:none;
        height:30px;
        transition:height 1s;
        -webkit-transition:height 1s;
    }
    #email:focus {
      
        height:50px;
        font-size:16px;
    }

<div id="bgDiv" name="bgDiv" class="bgDiv">
<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;">
</div>
<div id="mainDiv" name="mainDiv" class="mainDiv">
<form id="iform" name="iform" action="index.php" method="post">
<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>
</form>
</div>

Answer 2

Try:

  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
  filter: alpha(opacity=60); /* For IE8 and earlier */

Here's a fiddle that gives an example.