Menu icon Foundation
Foundation 6 : Changing select tag drop down arrow color

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>

To 

<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. :) 

selectdrop-downchanging colorsvgfoundation 6select tagfoundation-sites

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>

To 

<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. :) 

jm 5 months ago

This can be done much easier and quicker by using the foundation mixin background-triangle within the select !

Example:

select {
 @include background-triangle(red);

}