<select class="c-custom-select">
<option class="hideme">Select and industry</option>
<option value="Software Company & IT Services">Software Company & IT Services <span class="price">1000 р</span></option>
<option value="Agency (Marketing, Web, Advertising, Video)">Agency (Marketing, Web, Advertising, Video)
<span>1000 р</span></option>
<option value="Real State">Real State<span class="price">1000 р</span></option>
<option value="Financial or Credit Services">Financial or Credit Services<span class="price">1000 р</span></option>
<option value="Media & Entertainment">Media & Entertainment<span class="price">1000 р</span></option>
<option value="Hospitality, Trave, & Leisure">Hospitality, Trave, & Leisure</option>
<option value="Consultant (IT, Marketing, Sales">Consultant (IT, Marketing, Sales</option>
<option value="Professional Services">Professional Services</option>
<option value="Manufacturing & Hardware">Manufacturing & Hardware</option>
<option value="Construction & Engineering">Construction & Engineering</option>
</select>
// Main Select Box
.jcf-select{
position: relative;
display: block;
width: 100%;
height: 40px;
line-height: 40px;
padding-left: 8px;
padding-right: 8px;
border: 1px solid;
cursor: pointer;
// Main options Box
&-drop {
position: absolute;
left: -1px;
}
}
// Main list of options box
.jcf-list-content {
display: block;
position: relative;
top: 0px;
border: 1px solid;
ul {
list-style: none;
padding: 0;
margin: 0;
}
}
// Option style
.jcf-option {
display: block;
cursor: pointer;
padding-left: 8px;
padding-right: 8px;
&:hover {
background: gray;
}
// Hide first option
&.jcf-option-hideme { display: none; }
}
.jcf-scrollbar-vertical {
width: 8px;
top: 1%;
right: 10px;
bottom: 0;
}
.jcf-scrollbar-slider {
background-color: #e4e7ea;
height: 98% !important;
border-radius: 8px;
}
.jcf-scrollbar-handle {
background-color: #b0b9c2;
width: 10px;
max-height: 100%;
border-radius: 8px;
}
.price {
color: red;
}
View Compiled
$(function() {
var customSelect = $('.c-custom-select');
// Options for custom Select
jcf.setOptions('Select', {
wrapNative: false,
wrapNativeOnMobile: false,
fakeDropInBody: false,
maxVisibleItems: 5
});
jcf.replace(customSelect);
});
This Pen doesn't use any external CSS resources.