DropKick Examples

custom_theme.css

.dk_theme_black {
  background: #aebcbf;
  background: -moz-linear-gradient(top,
    #aebcbf 0%,
    #6e7774 50%,
    #0a0e0a 51%,
    #0a0809 100%
  );
  background: -webkit-gradient(linear,
    left top,
    left bottom,
    color-stop(0%,#aebcbf),
    color-stop(50%,#6e7774),
    color-stop(51%,#0a0e0a),
    color-stop(100%,#0a0809)
  );
  background: -webkit-linear-gradient(top,
    #aebcbf 0%,
    #6e7774 50%,
    #0a0e0a 51%,
    #0a0809 100%
  );
  background: -o-linear-gradient(top,
    #aebcbf 0%,
    #6e7774 50%,
    #0a0e0a 51%,
    #0a0809 100%
  );
  background: -ms-linear-gradient(top,
    #aebcbf 0%,
    #6e7774 50%,
    #0a0e0a 51%,
    #0a0809 100%
  );
  background: linear-gradient(top,
    #aebcbf 0%,
    #6e7774 50%,
    #0a0e0a 51%,
    #0a0809 100%
  );
}
  .dk_theme_black .dk_toggle,
  .dk_theme_black.dk_open .dk_toggle {
    background-color: transparent;
    color: #fff;
    text-shadow: none;
  }
  .dk_theme_black .dk_options a {
    background-color: #333;
    color: #fff;
    text-shadow: none;
  }
    .dk_theme_black .dk_options a:hover,
    .dk_theme_black .dk_option_current a {
      background-color: #E15A01;
      color: #fff;
      text-shadow: #604A42 0 1px 0;
    }

dropkick_example_callback.js

$('.change').dropkick({
  change: function (value, label) {
    alert('You picked: ' + label + ':' + value);
  }
});

dropkick_example_default.js

$('.default').dropkick();

dropkick_example_theme.js

$('.custom_theme').dropkick({
  theme: 'black',
  change: function (value, label) {
    $(this).dropkick('theme', value);
  }
});

select.html

<select name="pretty" tabindex="1" class="pretty dk">
  <option value="">Choose a reaction</option>
  <option value="amazed">Amazed</option>
  <option value="bored">Bored</option>
  <option value="surprised">Surprised</option>
</select>

theme_boilerplate.css

/**
 * Your theme name here
 *
 * Say something about the theme
 *
 * Give yourself some credit here
 *
 */

/* Container */
.dk_mytheme .dk_container {}
  .dk_mytheme a {}

/* Toggle */
.dk_mytheme .dk_toggle {}
  .dk_mytheme .dk_toggle:hover {}

/* Focus State */
.dk_mytheme.dk_focus,
.dk_mytheme:focus {}
  .dk_mytheme.dk_focus .dk_toggle {}
  
/* Open State */
.dk_mytheme.dk_open {}
  .dk_mytheme.dk_open .dk_toggle {}

/* Options Menu */
.dk_mytheme .dk_options {}
  .dk_mytheme .dk_options a {}
  .dk_mytheme .dk_options a:hover,
  .dk_mytheme .dk_option_current a {}

/* Inner options */
.dk_mytheme .dk_options_inner {}

/* Set a height / min-height property here */
.dk_mytheme .dk_options_inner,
.dk_mytheme.dk_touch .dk_options {}