<!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();
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
Normalize
jQuery
v3.1.1
