PolicyGenius - Style Guide

Selectbox

Selectbox

 
.mod-example
  .selectbox
    select
      option Nam metus massa
      option Pellentesque habitant
      option Sed non diam id purus placerat

Selectbox with placeholder text

 
.mod-example
  .selectbox
    select
      option value='' Phasellus nisi est
      option value='1' Vestibulum ante
      option value='2' Sed iaculis ante
      option value='3' Donec lobortis dui eget lectus

Focus state

 
.mod-example
  .selectbox.focused
    select
      option Nam metus massa
      option Pellentesque habitant
      option Nullam mollis turpis eget mattis

No-border verison

 
.mod-example style='background: #00A4A5; padding: 24px;'
  .selectbox.no-border
    select
      option Nam metus massa
      option Pellentesque habitant
      option Nullam mollis turpis eget mattis
 
$(function() {
  $('select option').each(function() {
    var $this = $(this),
        $select = $this.parent();

    if ($this.index() == 0 && $this.val() == '') {
      $select.addClass('placeholder');
    }
  });

  $('select').on('change', function() {
    var $this = $(this);
    if ($this.val()) {
      $this.removeClass('placeholder');
    } else {
      $this.addClass('placeholder');
    }
  });
});