Question

I now need my search bar and button to be slightly transparent… kinda like twitters when the mouse is not hovering over it. How do i do this in html/css?
CSS:

.search1{
    position: absolute;
    font-family:"Arial Unicode MS";
    background-color:#CCCCCC;
    border-style:none     
}

.search2{
    position: absolute;
    border-style:none;
    font-family:"Arial Unicode MS";
    color:black;
    background-color:#CCCCCC;
    font-size:xx-large 
}  

input:hover{
    background-color:white;
    border-color:white;
}

HTML:

<form class="search2" method="get" action="default.html" />
<input class="search2" type="text" name="serach_bar" size="31" maxlength="255"       
value="" style="left: 396px; top: 149px; width: 300px; height: 50px;" />
<input class="search1" type="submit" name="submition" value="Search" style=" padding-    bottom:20px; left: 710px; top: 157px; height: 17px" />
<input class="search2" type="hidden" name="sitesearch" value="default.html" />

Thanks in advance guys!

Answer 1

This will work with every browser including IE6

div {
 -khtml-opacity:.50; 
 -moz-opacity:.50; 
 -ms-filter:"alpha(opacity=50)";
  filter:alpha(opacity=50);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
  opacity:.50; 
}

see working example at http://jsfiddle.net/vnj4s/3/