This is Chosen stylesheet to use with ZURB Framework 5 (it expects to have @import "foundation" before this file is imported)

zurb-chosen.css.scss

@import "chosen";

.chosen-container {
  font-size: inherit;
  margin-bottom: $form-spacing;

  .chosen-single div {
    background: none;
    border-left: none;
    position: absolute;
    width: 2.5em;
    height: 2.3125em;
    display: block;
    right: 0;
    top: 0;
  }

  .chosen-single div b {
    background: none;
    content: "";
    display: block;
    width: 0;
    height: 0;
    border: inset 5px;
    border-color: #aaaaaa transparent transparent transparent;
    border-top-style: solid;
    position: absolute;
    left: 0.9375em;
    top: 50%;
    margin-top: -1px;
  }

  .chosen-single:hover div b {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border: inset 5px;
    border-color: #222222 transparent transparent transparent;
    border-top-style: solid;
  }

  .chosen-results li.highlighted {
    background: #eeeeee;
    color: black;
  }
}

.chosen-container-single {

  .chosen-single {
    height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
    border-radius: 0;
    background: linear-gradient(to bottom, white 0%, #f3f3f3 100%);
    border: solid 1px #cccccc;
    box-shadow: none;
    font-size: $input-font-size;
    line-height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
  }

  .chosen-drop {
    border-radius: 0;
  }

  .chosen-search {
    padding: 6px 3px;
  }

  .chosen-single abbr {
    top: 12px;
    right: 32px;
  }
}

.chosen-results {
  font-size: 0.875em;
  padding: 0.25em 2.375em 0.25em 0.375em;
  min-height: 1.5em;
  line-height: 1.5em;
  color: #555555;
}

This is great - have you done any work on styling multiple selects?

awesome, thanks!