issue with CSS linear-gradient in custom dropdown arrow icon style in Edge

Question

I'm trying to create custom dropdown with directional arrow icon style using CSS linear-gradient as depicted in the sample image. Arrow icon rendering properly in other browsers except Edge and IE. How could I get the directional arrow in edge and IE as same as other browsers.

<!DOCTYPE html>
<html>

<style>
    select {
        /* styling */
        background-color: white;
        border: thin solid blue;
        border-radius: 4px;
        display: inline-block;
        font: inherit;
        line-height: 1.5em;
        padding: 0.5em 3.5em 0.5em 1em;
        background-image: 
            linear-gradient(45deg,  transparent 50%, red 50% calc(50% + 1px), transparent calc(50% + 2px)), 
            linear-gradient(-45deg, transparent 50%, red 50% calc(50% + 1px), transparent calc(50% + 2px));
        background-position: 
            right 23px  top calc(1em), 
            right 15px  top calc(1em);
        background-size: 8px 8px;
        background-repeat: no-repeat;
        /* reset */
        margin: 0;
        box-sizing: border-box;
        -webkit-appearance: none;
        -moz-appearance: none;
    }

</style>
<body>

    <select>
        <option>option 1</option>
        <option>option 2</option>
        <option>option 3</option>
    </select>

</body>
</html>

Thanks!

It's working when we doing triangle shaped arrow icon style. check the implementation here. https://stackoverflow.com/questions/64509712/how-to-create-a-custom-dropdown-with-direction-down-arrow-in- — arunsignit, Nov 17 '20 at 12:25
replace this `red 50% calc(50% + 1px)` by `red 50%, red calc(50% + 1px)` — Temani Afif, Nov 17 '20 at 12:27

score 1 · Accepted Answer · answered Nov 17 '20 at 12:36

IE doesn't support the double position color so you need to change

red 50% calc(50% + 1px)

to

red 50%, red calc(50% + 1px)

to get

background-image: 
        linear-gradient(45deg,  transparent 50%, red 50%, red calc(50% + 1px), transparent calc(50% + 2px)), 
        linear-gradient(-45deg, transparent 50%, red 50%, red calc(50% + 1px), transparent calc(50% + 2px));

issue with CSS linear-gradient in custom dropdown arrow icon style in Edge

1 Answers1