ddSlick Plugin Demo

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

Thumbnail
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 Codepen.io
Copyright praliedutzel ©

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>ddSlick Plugin Demo</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

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

  
</head>

<body>

  <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>
  <div class="grid__spans-25">
    <label for="options">Label</label>
    <select id="options" class="test">
      <option value="1" data-imagesrc="http://placehold.it/64x64">Option 1</option>
      <option value="2" data-imagesrc="http://placehold.it/64x64">Option 2</option>
      <option value="3" data-imagesrc="http://placehold.it/64x64">Option 3</option>
      <option value="4" data-imagesrc="http://placehold.it/64x64">Option 4</option>
      <option value="5" data-imagesrc="http://placehold.it/64x64">Option 5</option>
    </select>
  </div>
  <div class="grid__spans-25">
    <label for="field2" class="field-label">Label</label>
    <input type="text" id="field2" class="field" />
  </div>
  <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>
    </select>
  </div>
</section>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/ddslick/2.0/jquery.ddslick.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/praliedutzel/ddslick-plugin-demo-PmRRgQ */
*, *: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%;
  }
}

#options,
.dd-select,
.dd-options {
  width: 100% !important;
}

.dd-selected-text,
.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 https://www.codeseek.co/praliedutzel/ddslick-plugin-demo-PmRRgQ */
// 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:
// http://designwithpc.com/Plugins/ddSlick

$('#options').ddslick();

Comments