How to change the gradient css for IE and safari

Question

I have implement the one image in jsp page.That image displayed in chrome and Firefox browser,but did not display the IE9 and SAFARI browser.so please help me everyone.

thanks for advance.

This is my html code:

<div class="dropDown"><span class="custom-dropdown custom-dropdown--white custom-dropdown--small" id="compDrop"  style="width: 150px;float:left;padding-top:10px;padding-bottom:0px;"></span></div>

and then this my css code:

     <style>
 .custom-dropdown--small {
        font-size: 1.7em;
    }


    .custom-dropdown__select--emerald {
        background-color: #20b390;
        color: #fff;    
    }               

    .custom-dropdown__select--red {
        background-color: #d53a22;
        color: #fff;
    }



        .custom-dropdown__select {
            padding-right: 2.5em; /* accommodate with the pseudo elements for the dropdown arrow */             
            border: 0;
            border-radius: 3px;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;    
        }

        .custom-dropdown::before,
        .custom-dropdown::after {
            content: "";
            position: absolute;
            pointer-events: none;
        }

        .custom-dropdown::after { /*  Custom dropdown arrow */
            content: "\25BC";
            font-size: 0.625em;
            height: 1em;
            line-height: 1;
            margin-right: 7px;
              right: 0.2em;
            top: 50%;

        }

        .custom-dropdown__select[disabled] {
            color: rgba(0,0,0,.3);
        }

        .custom-dropdown.custom-dropdown--disabled::after {
            color: rgba(0,0,0,.1);
        }

        .custom-dropdown--white::before {
            background-color: #DCDCDC;
            border-left: 1px solid rgba(0, 0, 0, 0.1);
            bottom: 0.5em;
            height: 25px;
           margin-right: 1;             
            top: 0.49em;
        }

        .custom-dropdown--white::after {
            color: rgba(0, 0, 0, 0.9);
        }                   


    }

</style>

above css code working fine in chrome and Firefox.

Please at least give us a hint as to what part of your CSS you are having trouble with, preferably with some supporting HTML. As it is you have just put a block of CSS with no real clue as to where you think the problem lies. Thanks. — Rob Quincey, May 02 '14 at 12:00
hi Rob Quincey i have changed css and HTML code are included. — user3515572, May 02 '14 at 12:29

score 0 · Answer 1 · edited May 23 '17 at 12:20

0

IE 9 apparently does not support gradients...

That said here is a post that may help - Gradients in Internet Explorer 9

Also check.. http://www.briangervais.com/blog/css-gradients-with-internet-explorer-ie6-10

edited May 23 '17 at 12:20

Community

1
1

answered May 02 '14 at 12:15

thatuxguy

2,418
7
30
51

How to change the gradient css for IE and safari

1 Answers1