</ head>
<!-- Custom Select Field Styles -->
<style>
/************ ADD YOUR VALUES BELOW ************/
:root {
/* ----------- Colors ----------- */
--list-bg-color: white;
--list-text-color: inherit; /* Use "inherit" to take on parent text color */
--select-field-arrow-color: black; /* This is the select field arrow color */
--border-color-active: black; /* Active State */
--border-color-hover: #dcdcdd; /* Select Field could be the same as your form field border color */
--list-item-bg-color: #ededed; /* Select Field Hover/Focus State */
/* ----------- Spacing ----------- */
--select-field-padding-left: 12px; /* Match the padding values for your form fields */
--select-field-padding-right: 12px; /* Match the padding values for your form fields */
--list-padding-top-bottom: 10px; /* This is the top and bottom padding for the dropdown list */
--list-max-height: 150px; /* You can set this to "Auto" as well */
--list-item-padding-left: 18px;
--list-item-padding-right: 18px;
--list-item-min-height: 40px; /* This is the height of each list item in the dropdown */
--list-item-line-height: 40px; /* This is the height of each list item in the dropdown */
/* ^^^ Make sure both "line-height" and "min-height" are the same! ^^^ */
}
/************ END OF CUSTOM VALUES ************/
.nice-select {
-webkit-tap-highlight-color: transparent;
box-sizing: border-box;
clear: both;
padding-left: var(--select-field-padding-left);
padding-right: var(--select-field-padding-right);
position: relative;
text-align: left !important;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
white-space: nowrap;
}
.nice-select:hover {
border-color: var(--border-color-hover);
}
.nice-select:active, .nice-select.open, .nice-select:focus {
border-color: var(--border-color-active);
}
.nice-select:after {
border-bottom: 2px solid var(--select-field-arrow-color);
border-right: 2px solid var(--select-field-arrow-color);
content: '';
display: block;
height: 5px;
margin-top: -4px;
pointer-events: none;
position: absolute;
right: 12px;
top: 50%;
-webkit-transform-origin: 66% 66%;
-ms-transform-origin: 66% 66%;
transform-origin: 66% 66%;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
width: 5px;
}
.nice-select.open:after {
-webkit-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.nice-select.open .list {
opacity: 1;
pointer-events: auto;
-webkit-transform: scale(1) translateY(0);
-ms-transform: scale(1) translateY(0);
transform: scale(1) translateY(0);
}
.nice-select.disabled {
border-color: #ededed;
color: #999;
pointer-events: none;
}
.nice-select.disabled:after {
border-color: #cccccc;
}
.nice-select.wide {
width: 100%;
}
.nice-select.wide .list {
left: 0 !important;
right: 0 !important;
}
.nice-select.right {
float: right;
}
.nice-select.right .list {
left: auto;
right: 0;
}
.nice-select.small {
font-size: 12px;
height: 36px;
line-height: 34px;
}
.nice-select.small:after {
height: 4px;
width: 4px;
}
.nice-select.small .option {
line-height: 34px;
min-height: 34px;
}
.nice-select .list {
background-color: var(--list-bg-color);
color: var(--list-text-color);
border-radius: 5px;
box-shadow: 0 7px 20px 0px rgba(68, 68, 68, 0.11);
border-color: 3px solid #ededed;
box-sizing: border-box;
margin-top: 4px;
opacity: 0;
overflow: hidden;
padding: var(--list-padding-top-bottom) 0px;
pointer-events: none;
position: absolute;
top: 100%;
left: 0;
overflow-y: scroll;
overflow-x: hidden;
max-height: var(--list-max-height);
-webkit-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transform: scale(0.75) translateY(-21px);
-ms-transform: scale(0.75) translateY(-21px);
transform: scale(0.75) translateY(-21px);
-webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
z-index: 9;
}
.nice-select .list:hover .option:not(:hover) {
background-color: transparent !important;
}
.nice-select .option {
cursor: pointer;
font-weight: 400;
line-height: var(--list-item-line-height);
list-style: none;
min-height: var(--list-item-min-height);
outline: none;
padding-left: var(--list-item-padding-left);
padding-right: var(--list-item-padding-right);
text-align: left;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.nice-select .option:first-child {
display: none;
}
span.current {
color: var(--list-text-color);
}
.nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus {
background-color: var(--list-item-bg-color);
}
.nice-select .option.selected {
font-weight: bold;
}
.nice-select .option.disabled {
background-color: transparent;
color: #999;
cursor: default;
}
.no-csspointerevents .nice-select .list {
display: none;
}
.no-csspointerevents .nice-select.open .list {
display: block;
}
</style>
</ body>
<!-- CUSTOM SELECT FIELD -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/js/jquery.nice-select.min.js"></script>
<script>
$(document).ready(function() {
$('select').niceSelect();
});
</script>
HTML/Embed
<!-- Custom Select Field Styles -->
<style>
/************ ADD YOUR VALUES BELOW ************/
:root {
/* ----------- Colors ----------- */
--list-bg-color: white;
--list-text-color: inherit; /* Use "inherit" to take on parent text color */
--select-field-arrow-color: black; /* This is the select field arrow color */
--border-color-active: black; /* Active State */
--border-color-hover: #dcdcdd; /* Select Field could be the same as your form field border color */
--list-item-bg-color: #ededed; /* Select Field Hover/Focus State */
/* ----------- Spacing ----------- */
--select-field-padding-left: 12px; /* Match the padding values for your form fields */
--select-field-padding-right: 12px; /* Match the padding values for your form fields */
--list-padding-top-bottom: 10px; /* This is the top and bottom padding for the dropdown list */
--list-max-height: 150px; /* You can set this to "Auto" as well */
--list-item-padding-left: 18px;
--list-item-padding-right: 18px;
--list-item-min-height: 40px; /* This is the height of each list item in the dropdown */
--list-item-line-height: 40px; /* This is the height of each list item in the dropdown */
/* ^^^ Make sure both "line-height" and "min-height" are the same! ^^^ */
}
/************ END OF CUSTOM VALUES ************/
.nice-select {
-webkit-tap-highlight-color: transparent;
box-sizing: border-box;
clear: both;
padding-left: var(--select-field-padding-left);
padding-right: var(--select-field-padding-right);
position: relative;
text-align: left !important;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
white-space: nowrap;
}
.nice-select:hover {
border-color: var(--border-color-hover);
}
.nice-select:active, .nice-select.open, .nice-select:focus {
border-color: var(--border-color-active);
}
.nice-select:after {
border-bottom: 2px solid var(--select-field-arrow-color);
border-right: 2px solid var(--select-field-arrow-color);
content: '';
display: block;
height: 5px;
margin-top: -4px;
pointer-events: none;
position: absolute;
right: 12px;
top: 50%;
-webkit-transform-origin: 66% 66%;
-ms-transform-origin: 66% 66%;
transform-origin: 66% 66%;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
width: 5px;
}
.nice-select.open:after {
-webkit-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.nice-select.open .list {
opacity: 1;
pointer-events: auto;
-webkit-transform: scale(1) translateY(0);
-ms-transform: scale(1) translateY(0);
transform: scale(1) translateY(0);
}
.nice-select.disabled {
border-color: #ededed;
color: #999;
pointer-events: none;
}
.nice-select.disabled:after {
border-color: #cccccc;
}
.nice-select.wide {
width: 100%;
}
.nice-select.wide .list {
left: 0 !important;
right: 0 !important;
}
.nice-select.right {
float: right;
}
.nice-select.right .list {
left: auto;
right: 0;
}
.nice-select.small {
font-size: 12px;
height: 36px;
line-height: 34px;
}
.nice-select.small:after {
height: 4px;
width: 4px;
}
.nice-select.small .option {
line-height: 34px;
min-height: 34px;
}
.nice-select .list {
background-color: var(--list-bg-color);
color: var(--list-text-color);
border-radius: 5px;
box-shadow: 0 7px 20px 0px rgba(68, 68, 68, 0.11);
border-color: 3px solid #ededed;
box-sizing: border-box;
margin-top: 4px;
opacity: 0;
overflow: hidden;
padding: var(--list-padding-top-bottom) 0px;
pointer-events: none;
position: absolute;
top: 100%;
left: 0;
overflow-y: scroll;
overflow-x: hidden;
max-height: var(--list-max-height);
-webkit-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transform: scale(0.75) translateY(-21px);
-ms-transform: scale(0.75) translateY(-21px);
transform: scale(0.75) translateY(-21px);
-webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
z-index: 9;
}
.nice-select .list:hover .option:not(:hover) {
background-color: transparent !important;
}
.nice-select .option {
cursor: pointer;
font-weight: 400;
line-height: var(--list-item-line-height);
list-style: none;
min-height: var(--list-item-min-height);
outline: none;
padding-left: var(--list-item-padding-left);
padding-right: var(--list-item-padding-right);
text-align: left;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.nice-select .option:first-child {
display: none;
}
span.current {
color: var(--list-text-color);
}
.nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus {
background-color: var(--list-item-bg-color);
}
.nice-select .option.selected {
font-weight: bold;
}
.nice-select .option.disabled {
background-color: transparent;
color: #999;
cursor: default;
}
.no-csspointerevents .nice-select .list {
display: none;
}
.no-csspointerevents .nice-select.open .list {
display: block;
}
</style>
Only tabs with a " " have code.
<!-- CUSTOM SELECT FIELD -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/js/jquery.nice-select.min.js"></script>
<script>
$(document).ready(function() {
$('select').niceSelect();
});
</script>
Only tabs with a " " have code.
Only tabs with a " " have code.
Only tabs with a " " have code.
If you have already pasted this code into your project then you can skip this. If you haven't, and it's your first time using CodeCrumbs, then copy this code and navigate to your sites global settings > Custom Code tab > paste it into the <head> (first custom code block). It just needs to exist once.
How to use:
Tutorial Coming Soon!
Check Browser Support
Interactive Table
More related crumbs..
Want to contribute to the community?
Tell us what code you're working with. We would love to see it and possibly add it to the library.