Is it possible to make text-indent property works only for chrome, safari?

Question

I have a combo box with a icon in the left hand. In chrome it looks like the second image overlapping icon and text -

So to resolve the problem I used text-indent because in chrome and safari browser don't consider padding.

Now the issue resolved in chrome and safari. But the problem is in firefox both padding and text-indent has considered. And it looks like -

To restrict firefox I wrote the css like -

.filter:not(*:root) {
    text-indent: 19px;
}

Still for firefox 53.0 its considering text-indent.

Any workaround for this problem ?

Answer 1

This is similar to this question: Firefox select element doubles text-indent value

To reset the text-indent for firefox only:

@-moz-document url-prefix() {
    select {
        text-indent: 0;
    }
}