How can I change the arrow on a is not quite customizable at this point. – AVAVT Feb 14 '17 at 19:55

Question

I wanted to the same thing before. Here's what worked for me.

select-dropdown {
     -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
    background: url('path/to/file.jpg') no-repeat right center !important; 
    background-color: white !important;
}

score 2 · Answer 1 · answered Feb 14 '17 at 19:59

I wanted to the same thing before. Here's what worked for me.

select-dropdown {
     -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
    background: url('path/to/file.jpg') no-repeat right center !important; 
    background-color: white !important;
}

GeorgeButter · Accepted Answer · 2017-02-15T03:11:25.667

2

You can use an svg as a css background image like so:

.product-single__variants { 
 background: url("data:image/svg+xml;utf8,{{ icon.svg | asset_url | replace: '"', "'" }}")  no-repeat;
}

edited Feb 15 '17 at 03:11

answered Feb 15 '17 at 00:33

GeorgeButter

2,521
1
29
47

2 Answers2