Transparent background issue with FireFox in CSS

  Hi experts ;
     i have transparent backgrounded division that works fine,but when i add someother images or elements such as inputbox or select inside it, they became transparent too in FireFox ,but works fine in ie.

   .box{width:auto;height:auto;background-color:#000;filter:alpha(opacity=40);-moz-opacity:.4;padding:15px;}

     when i try to create an input box inside the division above , it becomes transparent too .I tried to create a span class and declare none opacity for (by assigning 1 to opacity and 100 to alpha) it and use it inside the box division but that didnt work ,because it reduces the opacity once because of the box div.
 
     I know there are some alternative ways ,such as using transparent backgrounded .png or .gif image files which wont work in ie.

   Also the code below will work as exact solution for the issue that i am in ,just looking for better if there is one ?
        Note :Assume that bg.gif is a transparent backgrounded image and bg2.gif is solid.
      .box{width:auto;height:auto;background-image:url('bg.gif')!important;background-image:url('bg2.gif');filter:alpha(opacity=100)!important;-moz-opacity:1!important;filter:alpha(opacity=40);-moz-opacity:.4;}Start Free Trial