To better adapt the drop down arrow color of select tags according to the UI needs, sometimes the color of its has to be changed.
After doing some dig into the ways of doing it (solid 30 mins just for this issue), I found that an svg element is being generated to depict the drop down arrow or the bottom pointed triangle (For select tags - Foundation 6).
Exact Code that generates the triangle :
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="24" viewBox="0 0 32 24"><polygon points="0,0 32,0 16,24" style="fill: rgb%28138, 138, 138%29"></polygon></svg>')
At first, I didn't bother much about the above code and went on searching to change the color of svg elements using css. But then it occurred to me that, over here svg element is being generated and not referred to a source file. So applying css to changing the svg color isn't going to suit the purpose.
Then I went through the code, and found the 'fill' attribute inside the <polygon> tag. That was the moment!
Change it from
<polygon points="0,0 32,0 16,24" style="fill: rgb%28138, 138, 138%29"></polygon>
<polygon points="0,0 32,0 16,24" style="fill: #DesiredColorCode">
You can now easily set your desired color to the select tag's drop down arrow / bottom pointed triangle.
Hope this helps someone. :)