Make Text Input Box Transparent? Should be simple?

user_3089680 0
Viewed 62725

I'm trying to make my form input transparent and over lay it on top of my div. Basically I want the text field to be transparent to whatever is behind it. Any suggestions?

<head>

<style type="text/css">
  .WRAPPER {
    background-color: #000;
    height: 575px;
    width: 975px;
    background-image: url(exit-gate/exit-gate-bg.png);
    top: auto;
    margin: -8px;
  }

  body {
    background-color: #000;
  } 
</style>

<style type="text/css">
  term {
    background: transparent;
    border: none;
  }
</style>

</head>



<body>
  <div id="WRAPPER"> 
    <div class="term"><input name="email" type="text" id="email">
      <form name="form1" method="post" action="insert_ac.php">
        <input type="image" src="exit-gate/white-box-10.png" alt="{alternate text}" name="submit" value="submit">
      </form>
    </div>
  </div>
</body>
</html>
</div>
forms css html
5 Answers

this looks ways too simple but it worked for me:

 <input type="text" id="SI"/>

this is my input field, I gave it an ID(SI), then in my CSS:

#SI{
    background-color:transparent;
}

added the transparency to the element with SI id; the background became visible.

user_64298970

Also worth noting, on macOS and iOS, in any browser, the "user agent stylesheet" will override textbox style. You can override this (including the ::focus glow) by adding !important.

#mybox {
    background-color: transparent!important;
    border-color: transparent!important;
    outline: transparent!important;
}
<input type="text" id="mybox" value="Textbox" />

user_130628070

saying I want a transparent color is like having the parent's color so put the value of background-color as inherit.

for me this helped:

<input type="text" />

style:

input {
    background-color:inherit;
    }
user_93418240 

<style type="text/css">
 input {
  background-color : white;
  border-color: transparent;

 }
</style>
<input type="text" />

user_95831230
Related