CODEWITHSUNDEEP
cssfirefox
DesirePRG
DesirePRG

Reputation: 6378

"-webkit-filter" doesn't work in firefox 41.0.2

I have a css property for a disabled button as follows.

.btn-disabled {
    pointer-events: none;
    cursor: default;
    color:#cecece !Important;
    -webkit-filter: opacity(50%)    
}

I get the needed effect in chrome, but not in firefox. Is there a way to achieve the same in firefox,chrome,saffari through the same css properties?

Upvotes: 1

Views: 85

Answers (3)

Khurram
Khurram

Reputation: 31

simply use firefox -moz- prefix,

.btn-disabled{   
    pointer-events: none;
    cursor: default;
    color:#cecece !Important;
    -webkit-filter: opacity(50%);
    -moz-filter: opacity(50%);
    filter: opacity(50%);
}

Upvotes: 0

Matej Đaković
Matej Đaković

Reputation: 880

You need use prefix for firefox -moz-, this is for all browsers:

.btn-disabled {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
    filter: alpha(opacity=50);  /* IE 5-7 */
    -moz-opacity: 0.5; /* Netscape - firefox */
    -khtml-opacity: 0.5; /* Safari 1.x */
    opacity: 0.5; /* Good browsers */
    pointer-events: none;
    cursor: default;
}

You can see that here.

Upvotes: 3

Quentin
Quentin

Reputation: 943571

Vendor prefixed properties are experimental features in specific browser engines.

Firefox is built around Gecko, not Webkit, so experimental Webkit features will not work in it.

Avoid using vendor prefixed properties on the open web (unless you are writing sites where the point is to experiment instead of being robust).

Firefox has supported the non-prefixed version for quite some time.

If you really want decent browser support, use the opacity property instead. It has support back to Firefox 1.

Upvotes: 1

Related Questions