ddSlick Plugin Demo

In this example below you will see how to do a ddSlick Plugin Demo with some HTML / CSS and Javascript

This awesome code was written by praliedutzel, you can see more from this user in the personal repository.
You can find the original code on
Copyright praliedutzel ©


  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>ddSlick Plugin Demo</title>
    <link rel="stylesheet" href="">

      <link rel="stylesheet" href="css/style.css">



  <section class="grid">
  <div class="grid__spans-25">
    <label for="field1" class="field-label">Label</label>
    <input type="text" id="field1" class="field" value="Field" />
  <div class="grid__spans-25">
    <label for="options">Label</label>
    <select id="options" class="test">
      <option value="1" data-imagesrc="">Option 1</option>
      <option value="2" data-imagesrc="">Option 2</option>
      <option value="3" data-imagesrc="">Option 3</option>
      <option value="4" data-imagesrc="">Option 4</option>
      <option value="5" data-imagesrc="">Option 5</option>
  <div class="grid__spans-25">
    <label for="field2" class="field-label">Label</label>
    <input type="text" id="field2" class="field" />
  <div class="grid__spans-25">
    <label for="field3" class="field-label">Label</label>
    <select id="field3">
      <option value="">Option 1</option>
      <option value="">Option 2</option>
      <option value="">Option 3</option>
  <script src=''></script>
<script src=''></script>


    <script  src="js/index.js"></script>



/*Downloaded from */
*, *:before, *:after {
  box-sizing: border-box;

.grid {
  display: flex;

.grid__spans-25 {
  width: 100%;
  padding: 1em;
@media screen and (min-width: 48em) {
  .grid__spans-25 {
    width: 25%;

.dd-options {
  width: 100% !important;

.dd-option-text {
  line-height: 64px !important;

.dd-select {
  background: #fff !important;
  border-color: #d1d3d4 !important;
  border-radius: 0 !important;

.dd-selected {
  font-weight: normal !important;

label {
  display: block;

input[type="text"], input[type="name"], input[type="email"], input[type="tel"], input[type="password"], select {
  background: transparent;
  width: 100%;
  height: 42px;
  padding: 10px;
  display: block;
  border: 1px solid #d1d3d4;
  border-radius: 0;
  outline: none;
  transition: all 0.2s;

/*Downloaded from */
// This is a demo for ddSlick, a jQuery plugin that
// allows images and descriptions in select dropdowns
// The code can be found here, but demos are broken: