如何更改 Foundation 5 <select> 下拉三角形的颜色

Question

查看 Foundation 5 的 _forms.scss，我看到在表单元素上生成三角形的代码：

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

这会生成一个黑色的三角形（根据我的喜好有点小），我想自定义它。

我知道我可以使用 css background-size 属性调整它的大小，但我想知道是否有办法改变三角形的颜色？
- 我需要重新生成base64编码的svg+xml吗？
- 如果有，有没有什么好的生成工具？

附带说明一下，对于扩展 Foundation 5 .scss 以便能够使用 scss $variable 设置颜色是否有任何建议？

Answer 1

如果您对该值进行 base64 解码，您将获得以下 SVG 数据。

    <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>

如果您希望将颜色更改为红色，例如，您需要为polygon 添加一个带有fill 声明的style 属性。

<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>

然后将其编码回base64。您可以使用任何在线服务，例如 base64decode.org，或使用您选择的语言的功能，例如 Javascript 或 PHP 等

SVG 元素也可以使用 CSS 设置样式，并具有类和 id 属性。 （虽然我不确定它是否适用于 base64 编码元素）。