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>
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With