0

I have a jquery mobile collapsible and I want to make it transparent

I tried following style, but was in vain

background-color: rgba(0, 0, 0, 0.6);

Here is the Fiddle

When I use 

background: #557700;
filter: alpha(opacity=30);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);
opacity:0.3;

Entire collapsible div including selectbox inside become transparent.

How can I solve this so that only background of collapsible is transparent.

EDIT

This is what is used to get it work

$('#my_collapsible').find('div').first().css({ 'background-color': 'rgba(0,0,0,0.5)','color':'white'})

Don't know if this is a good approach.

Cœur
  • 37,241
  • 25
  • 195
  • 267
hitesh israni
  • 1,742
  • 4
  • 25
  • 48

1 Answers1

0

Actually there is class ui-btn-up-c which is creating problem. In this class there is already background gradient is applied because of which you are not able to experience transparency.

.ui-btn-up-c {
    background: -moz-linear-gradient(rgba(255, 255, 255, 0.5), rgba(241, 241, 241, 0.5)) repeat scroll 0 0 #EEEEEE; /* Add something like this*/
    border: 1px solid #CCCCCC;
    color: #222222;
    font-weight: bold;
    text-shadow: 0 1px 0 #FFFFFF;
}

This will help you: CSS3 Transparency + Gradient

Community
  • 1
  • 1
SVS
  • 4,245
  • 1
  • 23
  • 28