CODEWITHSUNDEEP
htmlcssforms
HoustonGuy
HoustonGuy

Reputation: 167

Make Text Input Box Transparent? Should be simple?

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>

Upvotes: 11

Views: 68109

Answers (5)

Mahdi-Jafaree
Mahdi-Jafaree

Reputation: 1123

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;
    }

Upvotes: 1

kat
kat

Reputation: 104

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" />

Upvotes: 1

Odin
Odin

Reputation: 7

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

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

Upvotes: 0

L.Kelemen
L.Kelemen

Reputation: 51

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.

Upvotes: 5

codingrose
codingrose

Reputation: 15709

Try:

#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;
}

DEMO here.

Upvotes: 19

Related Questions