Html transparent text input window

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 trying to make text input a transparent background so that the user can see the main background image of the page. At the same time, you can still see the text entered in the field.

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

} background color: RGBA (0,0,0,0);

none of them work or have no effect. Please, help.

Answer 1

try

  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.

Answer 3

I think this is what you need:

 body,html{ margin: 0; padding: 0 } .wrapper{ background: url('http://wallpapercave.com/wp/2u5OrmL.png'); height: 100vh; text-align: center } input{ background: transparent; color: #FFF; top: 40vh; position: relative; border: 1px solid #FFF; display: inline-block; } 

 <div class="wrapper"> <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="width:90%;font-size:98px;text-align: center;" autocomplete="off" autofocus> </form> </div>