CODEWITHSUNDEEP
svgsasszurb-foundation
jlee
jlee

Reputation: 474

How to change color of Foundation 5 <select> dropdown triangle

Looking at the _forms.scss for Foundation 5, I see this code that generates the triangle on the form element:

background-image: url('data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgNiAzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNS45OTIsMCAyLjk5MiwzIC0wLjAwOCwwICIvPjwvc3ZnPg==');

this generates a triangle that is black (and a little small for my tastes) and I would like to customize it.

I know I can resize it with the css background-size property, but I was wondering if there is a way that I can change the color of the triangle?
- Do I need to regenerate the base64-encoded svg+xml?
- If so, are there any good tools out there for generating?

As a side note, are there any recommendations for extending Foundation 5 .scss to be able to use a scss $variable to set the color?

Upvotes: 2

Views: 925

Answers (1)

Adam Elsodaney
Adam Elsodaney

Reputation: 7808

If you base64-decode the value, you'll get the following SVG data.

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
        x="0px"
        y="0px"
        width="6px"
        height="3px"
        viewBox="0 0 6 3"
        enable-background="new 0 0 6 3"
        xml:space="preserve"
    >
        <polygon points="5.992,0 2.992,3 -0.008,0" />
    </svg>

If you wanted the change the color to red, for example, you'll add a style attribute with a fill declaration for the polygon.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
    x="0px"
    y="0px"
    width="6px"
    height="3px"
    viewBox="0 0 6 3"
    enable-background="new 0 0 6 3"
    xml:space="preserve"
>
    <!-- red triangle -->
    <polygon
        points="5.992,0 2.992,3 -0.008,0"
        style="fill:red;"
    />
</svg>

Then encode it back to base64. You can use any online service, like base64decode.org, or use a function in your language of choice, like Javascript or PHP, etc

SVG elements can also be styled with CSS and have classes and id attributes. (Though I'm not sure if it works for base64 encoded elements).

Upvotes: 3

Related Questions