현상.

foundation-rails에서 select 요소를 정의할 때 특정 환경에서 이중으로 표시됩니다.

확인해 봤는데 다음 환경에서 일어났어요.

Chrome 53.0.2785.135 on Android 7

표준 브라우저 on 안드로이드 6/5

Windows7 Enterprise

IE11

Chrome 59.0.3071.104

한편 MacOS Sierra 10.12.4의 Firefox 54.0에는 다음과 같은 미묘한 ▶이 나타났다.

하지만 다음 환경에서는 일어나지 않았다.

macOS Sierra 10.12.4

Chrome 59.0.3071.86

Safari 10.1

해결책

방법autooprefixer-rails 가져오기

가져오기는 브라우저 지원에 따라 협력업체 접두어autoprefixer-rails를 자동으로 삽입합니다.
Gemfile에 정의를 추가합니다.

gem "autoprefixer-rails"

설치하다.

bundle install

마지막으로 Rails를 다시 시작합니다.
개발 초기 단계라면 이 방법이 좋을 것 같아요.다만 영향 범위가 넓어 개발 단계 후반부 이후에는 다른 스타일에 영향을 미치는지 확인해야 해 어려울 수 있다.
이 경우 다음과 같은 방법을 연구하십시오.

방법수동으로 CSS 덮어쓰기

다음 정의를 적절한 CSS에 추가합니다.

select{
  -webkit-appearance: none;
  -moz-appearance: none;
}

간단하네.영향은 select 요소에만 한정됩니다.

까닭

브라우저의 표준 스타일 정의와 달리 Foundation은 background-image를 정의합니다.
다음은 크롬의 Developper Tools가 foundation-rails의 select 요소를 기반으로 한 CSS 정의를 확인한 화면이다.apperearance가 비활성화되어 지원되지 않는 것 같습니다.

아이슈에 따르면 원래 버그가 아닌 오토프리픽서가 없는 사스 버전(foundation-rails는 이에 해당)을 사용해 발생하는 현상이다.

select icon in chrome · Issue #9968 · zurb/foundation-sites

Fundation 문서에는 협력업체 접두사가 Sass에 포함되지 않은 내용도 기재되어 있습니다.
We don't include vendor prefixes in our Sass files—instead, we let Autoprefixer handle it for us.
Sass | Foundation for Sites 6 Docs