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 2 months 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 2 months 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.