How to set html input field transparent on a transparent div?

Nathanael picture Nathanael · Jun 27, 2012 · Viewed 41.5k times · Source

I have a div set transparent with rgba and want on that div an input field which also has a transparent background. The problem is that the input field background is not rendered transparent. It works if I use opacity:0.8; on the div but than also the text is transparent, so I need rgba. For the second input field which is outside of the transparent div rgba works.

Here my example code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Insert title here</title>

<style type="text/css">

.term {
background-color: rgba(0,0,0,0.8);
color: #5fba3d;
width: 200px;
height: 100px;
}

input {
background-color: rgba(0,0,0,0.8);
color: #FFF;
border: none;
}

</style>

</head>

<body>

<div style="background-color:yellow; width:300px;">

   <div class="term">
      Input 1 <input type="text" value="Test" />
   </div>

   <br />

   <input type="text" value="Input 2" />

</div>

</body>
</html>

Any ideas?

Thanks!

Nathanael

Answer

Shailender Arora picture Shailender Arora · Jun 27, 2012

Hey Nathaneal its working fine if i chang the rgba value so text is not going to transparent

input {
background-color: rgba(0,0,0,0.1);
color: red;
border: none;
}

i hope this will help you... you can see the demo :- http://jsbin.com/avupaw/16/edit#html,live