.form-wrapper
  .search-form
  form
      .form-group
        .input-group(multiselect)
          label Select your Location
          select(name='eventLocations[]', multiple)
            option(selected='', value='') All
            optgroup(label='California')
              option(value='6431') Berkeley
              option(value='6453') Los Angeles
              option(value='6473') San Francisco
              option(value='6577') Santa Barbara
            optgroup(label='Colorado')
              option(value='6442') Denver
            optgroup(label='District of Columbia (DC)')
              option(value='6486') District of Columbia (DC)
            optgroup(label='Florida')
              option(value='6460') Miami
            optgroup(label='Illinois')
              option(value='6437') Chicago
            optgroup(label='Louisiana')
              option(value='6465') New Orleans
            optgroup(label='Massachusetts')
              option(value='6433') Boston
              option(value='10342') Martha's Vineyard
            optgroup(label='Michigan')
              option(value='6424') Ann Arbor
              option(value='6445') Detroit
              option(value='7166') East Lansing
            optgroup(label='Minnesota')
              option(value='6481') Twin Cities
            optgroup(label='New York')
              option(value='65') New York City
            optgroup(label='North Carolina')
              option(value='6427') Asheville
            optgroup(label='Oregon')
              option(value='66') Portland
            optgroup(label='Pennsylvania')
              option(value='6469') Philadelphia
              option(value='6470') Pittsburgh
            optgroup(label='Texas')
              option(value='6451') Houston
            optgroup(label='Vermont')
              option(value='6435') Burlington
            optgroup(label='Washington')
              option(value='6477') Seattle
            optgroup(label='Wisconsin')
              option(value='6456') Madison
              option(value='6461') Milwaukee
            optgroup(label='Australia')
              option(value='63') Melbourne
              option(value='64') Sydney
            optgroup(label='Ireland')
              option(value='6447') Dublin
      .form-group
        .input-group
          label Type of Event
          select(name='typesOfEvents')
            option(selected='', value='') All
            option(value='52') Mainstage
            option(value='53') StorySLAM
            option(value='54') GrandSLAM
            option(value='55') Special Events
            option(value='56') Education
            option(value='57') Community
        .input-group
          label Date
          select(name='eventDate')
            option(selected='', value='') All
            optgroup(label='2016')
              option(value='201606') June
              option(value='201607') July
              option(value='201608') August
              option(value='201609') September
              option(value='201610') October
              option(value='201611') November
              option(value='201612') December
      .form-group
        input.btn.dark.centered(type='submit', value='Find Events')
View Compiled
accent = #c9e0dc
ltestgrey = #DDDEDF
ltgrey = #999999
navy = #323870
greyBlack = #161414

html
  font-size 12px
body
  background-image linear-gradient(top left, navy 0%, black 100%)
  font-family 'Helvetica', sans-serif
  display flex
  flex-direction column
  justify-content center
  min-height 100vh
  font-weight 200
[multiselect]
  position relative
  &:after
    display none
  select
    display none
.form-wrapper
  margin 0 auto
  background accent
  box-shadow 0 0 20px rgba(greyBlack, .8)
  padding 2rem
  margin 0 10%
  flex 0 0 auto
  .react-mount
    width 100%
    input[type="checkbox"]
      display none
  .select-wrapper
    .checkbox-wrapper
      max-height 0
      background-color white
      overflow hidden
      transition all .2s ease-in-out
    &.open
      .checkbox-wrapper
        max-height 300px
        overflow auto
        padding 1em
      .select-value:after
        transform translateY(-50%) rotate(180deg)
  .item-label
    color greyBlack
    font-size 1rem
    display block
    padding 1em
    transition background .1s linear
    cursor pointer
    &:hover
    &:active
    &:focus
      background-color accent
  .select-value
    border 1px solid ltestgrey
    display block
    padding 14px 40px 12px 16px
    border-radius 5px
    background-color white
    position relative
    cursor pointer
    &:after
      content "\f063"
      font-family 'FontAwesome', icon
      position absolute
      right 1em
      top 50%
      transform translateY(-50%)
      transition transform .5s ease-in-out
      transform-origin 50% 50%
    .placeholder
      font-size 1.5rem
      font-weight bold
    label
      padding .5em 1em
      background-color lighten(accent, 10)
      color greyBlack
      font-size 1.5rem
      border-radius 5px
      display inline-block
      margin .25em .25em
      &:first-child
        margin-left 0
      &:after
        content 'X'
        font-size .8em
        margin-left 1em
label
  display block
  color greyBlack
  font-size 1.3rem
  margin 1em 0
select
  appearance none
  border 1px solid ltestgrey
  background white
  display inline-block
  padding 14px 40px 12px 16px
  border-radius 5px
  width 100%
  font-size 1.5rem
  font-weight bold
  cursor pointer
  option
    font-size 1rem
.form-group
  width 100%
  display flex
  .input-group
    flex 1 1 50%
    margin 0 1em
    position relative
    &:after
      content "\f063"
      font-family 'FontAwesome', icon
      position absolute
      right 1em
      padding-top 4rem
      top 50%
      transform translateY(-50%)
  [type="submit"]
    appearance none
    background-color darken(accent, 20)
    border-radius 5px
    color white
    border none
    padding 1rem
    font-size 1.4rem
    font-weight bold
    margin 1em auto
    transition background-color .1s ease
    animation roll-gradient .2s linear infinite alternate
    cursor pointer
    &:hover
    &:active
    &:focus
      outline none
      background-color darken(accent, 40)
View Compiled
const { Component } = React;
const { render, findDOMNode } = ReactDOM;

class MultiSelect extends Component {
  constructor(props) {
    super(props);
   this.state = {
     selected: [],
     open: false
   };
  }
  handleChange(e) {
    const select = findDOMNode(this.refs.selectWrapper);
    const selected = select.querySelectorAll('input:checked');
    const realSelect = select.parentNode.parentNode.querySelectorAll('[selected]');
    const values = Array.prototype.map.call(selected, el => {
      return {
        name: el.value,
        id: el.id
      }
    });
    realSelect[0].value = values.map( value => {
      return value.id
    }).join(',');
    this.setState({
      selected: values,
      open: false
    });
  }
  buildGroup(group) {
    return group.options.map( item => {
      return (
        <li>
          <input
            onChange={::this.handleChange}
            type="checkbox" 
            id={item.id} 
            value={item.name}/>
          <label 
            htmlFor={item.id} 
            className="item-label">
            { item.name }
          </label>
        </li>
      )
    });
  }
  toggleMenu() {
    this.setState({
      open: !this.state.open
    });
  }
  render() {
    const {options} = this.props;
    const {selected, open} = this.state;
    return (
      <div ref="selectWrapper" className={classNames('select-wrapper',{
          open: open
        })}>
        {selected && 
          <div className="select-value" onClick={::this.toggleMenu}>
            {(selected.length < 1) &&
              <span className="placeholder">
                All
              </span>
            }
            {selected.map( el => {
            return (
              <span key={el.id}>
              <label 
                htmlFor={el.id}>
                { el.name }
              </label>
             </span>
             )})}
           </div>
         }
        {options && 
         <div className="checkbox-wrapper" onClick={::this.toggleMenu}>
         {options.map( group => {
            return (
              <ul>
                <label>{group.group}</label>
                {this.buildGroup(group)}
              </ul>
             )
          })}
        </div>
        }
      </div>
    );    
  }
};

const selectForms = document.querySelectorAll('[multiselect]');
[].slice.call(selectForms).forEach( select => {
  const mount = document.createElement('div');
  mount.className = 'react-mount';
  select.appendChild(mount);
  let selectOptions = select.querySelectorAll('optgroup');
  const options = Array.prototype.map.call(selectOptions, o => {
    const items = o.querySelectorAll('option');
    const formattedItems = Array.prototype.map.call( items, item => {
      return {
        name: item.innerText,
        id: item.value 
      }
    })
    return {
      group: o.label,
      options: formattedItems
    };
  });
  render(<MultiSelect options={options}/>, mount);
});

View Compiled
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css

External JavaScript

  1. https://npmcdn.com/react@15.3.0/dist/react.min.js
  2. https://npmcdn.com/react-dom@15.3.0/dist/react-dom.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/classnames/2.2.5/index.min.js