Menu icon Foundation
Double caret on select box

I'm upgrading to Foundation 6 for sites from Foundation 4.  

It's using Rails 5.0.x and the latest simple_form gem.

On all select boxes, 2 carets (circled below) appear on the box, slightly askew, one a slightly lighter shade of gray.

Also, on all required input fields (boxed below), an ellipsis appears below the asterisk that simple_form provides (I believe).

I suspect this is some kind of html5 thing or perhaps some conflict I am not aware of.

Any suggestions would be appreciated.

html5Sasscssrailssimple_form

I'm upgrading to Foundation 6 for sites from Foundation 4.  

It's using Rails 5.0.x and the latest simple_form gem.

On all select boxes, 2 carets (circled below) appear on the box, slightly askew, one a slightly lighter shade of gray.

Also, on all required input fields (boxed below), an ellipsis appears below the asterisk that simple_form provides (I believe).

I suspect this is some kind of html5 thing or perhaps some conflict I am not aware of.

Any suggestions would be appreciated.

Val Ery 10 days ago

Hi Ron!

Only the web inspector will help here.
For example, the element "select". Styles of the Foundation give an arrow down with a gray color. The second arrow probably appears because of the extra classes that your form adds.
Therefore:
A) or delete these added classes
B) or redefine their output in user-defined styles (custom.css)
C) either turn off the styles that are added by your form.

With asterisks similarly :)

P.S. Note the pseudo elements ::before and ::after

Ron Huppert 7 days ago

Thanks for the help.

I temporarily changed the $select-triangle-color to match the background as a quick hack, but I will further investigate and post a better solution to help those using F6 and simple_form.

I suspect behavior can be modified in the simple_form_foundation config file to solve this issue.