How to include transparency in html/css?

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!

CSS 3 introduces colour values with alpha channels, but you need to mix in images for backwards compatibility. http://dorward.me.uk/www/css/alpha-colour/ has a guide.

If you want the foreground too, then use opacity instead (it needs hacking for some versions of IE).

Use the

 opacity

property.... (the filter is for IE)

try

#element{
     opacity:.5;
     filter: alpha(opacity = 50);
   }

and

#element:hover{
    opacity:1;
    filter: alpha(opacity = 100);
}

You want to use the opacity. You'll need to add filter: alpha so it works in IE browsers.

Something like this

.searchBar {opacity: .7; filter:alpha(opacity=70);}
.searchBar:hover {opacity: 1; filter:alpha(opacity=100);}

Here's a link explaining it http://www.w3schools.com/css/css_image_transparency.asp

You can use opacity:

opacity:0.5

And IE's Filter:

filter:alpha(opacity=50);

Or the CSS3 RGBA Colors:

background-color:RGBA(0,0,0,0.5);

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/