Forked from Nikolay Talanov's Pen Custom select.
A Pen by Mihail Pavlov on CodePen.
Forked from Nikolay Talanov's Pen Custom select.
A Pen by Mihail Pavlov on CodePen.
<div class="drop" name="name-of-select"> | |
<div class="option active placeholder" data-value="placeholder"> | |
Choose wisely | |
</div> | |
<div class="option" data-value="wow"> | |
Wow! | |
</div> | |
<div class="option" data-value="drop"> | |
So dropdown! | |
</div> | |
<div class="option" data-value="select"> | |
Very select! | |
</div> | |
<div class="option" data-value="custom"> | |
Much custom! | |
</div> | |
<div class="option" data-value="animation"> | |
Such animation! | |
</div> | |
</div> |
$(document).ready(function() { | |
var selectHTML = '<select></select>'; | |
var $drop = $(".drop"); | |
$drop.each(function(index, element){ | |
$(element).append(selectHTML); | |
var $select = $(element).find("select"); | |
$select.attr("name",$(element).attr("name")) | |
$(element).find(".option").each(function(ind,opt){ | |
var val = $(opt).data("value"); | |
var text = $(opt).text(); | |
$select.append("<option value='"+val+"'>"+text+"</option>"); | |
}); | |
}); | |
$(".drop .option").click(function() { | |
var val = $(this).attr("data-value"), | |
$drop = $(this).parent(".drop"), | |
prevActive = $drop.find(".option.active").attr("data-value"), | |
options = $drop.find(".option").length; | |
$drop.find(".option.active").addClass("mini-hack"); | |
$drop.toggleClass("visible"); | |
$drop.removeClass("withBG"); | |
$(this).css("top"); | |
$drop.toggleClass("opacity"); | |
$(".mini-hack").removeClass("mini-hack"); | |
if ($drop.hasClass("visible")) { | |
setTimeout(function() { | |
$drop.addClass("withBG"); | |
}, 400 + options*100); | |
} | |
triggerAnimation($drop); | |
if (val !== "placeholder" || prevActive === "placeholder") { | |
$drop.find(".option").removeClass("active"); | |
$(this).addClass("active"); | |
if(val !== prevActive){ | |
$drop.find("select :selected").each(function(){this.selected=false;}); | |
$drop.find("select option[value='"+val+"']").attr("selected","selected"); | |
}; | |
}; | |
}); | |
function triggerAnimation($drop) { | |
var finalWidth = $drop.hasClass("visible") ? 22 : 20; | |
$drop.css("width", "24em"); | |
setTimeout(function() { | |
$drop.css("width", finalWidth + "em"); | |
}, 400); | |
}; | |
}); |
@import "compass/css3"; | |
$dark: #35414a; | |
$semilight: #86919a; | |
$blue: #5aafee; | |
*, *:before, *:after { | |
box-sizing: border-box; | |
margin: 0; | |
padding: 0; | |
} | |
@font-face { | |
font-family: pfs-bold; | |
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/PFSquareSansPro-Bold.otf'); | |
} | |
body { | |
background: $dark; | |
} | |
.drop { | |
width: 20em; | |
margin: 5em auto; | |
font-family: pfs-bold; | |
color: $semilight; | |
text-transform: uppercase; | |
position: relative; | |
transition: width 0.5s; | |
will-change: width; | |
.option { | |
padding: 1em; | |
cursor: pointer; | |
background-color: #485761; | |
&:not(.active) { | |
display: none; | |
opacity: 0; | |
transform: translateY(-50%); | |
} | |
} | |
select{ | |
display: none; | |
@media screen and (max-width: 750px) { | |
display: block; | |
position: absolute; | |
top: 0; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
width: 100%; | |
opacity: 0; | |
} | |
} | |
&.visible { | |
animation: bounce 1s; | |
width: 24em; | |
&:before, &:after { | |
border-color: #fff; | |
} | |
&:before { | |
opacity: 0; | |
} | |
&:after { | |
opacity: 1; | |
} | |
.option { | |
color: #fff; | |
display: block; | |
} | |
} | |
&.opacity { | |
.option { | |
transform: translateZ(0); | |
opacity: 1; | |
@for $i from 0 to 10 { | |
&:nth-child(#{$i}) { | |
transition: opacity 0.5s 0.1s*$i, transform 0.5s 0.1s*$i; | |
} | |
} | |
} | |
} | |
&.withBG { | |
.option { | |
transition: background-color 0.1s; | |
&:not(.placeholder):hover { | |
background-color: $blue; | |
} | |
&:not(.placeholder).active { | |
background-color: $blue; | |
} | |
} | |
} | |
&:after, &:before { | |
content: ""; | |
position: absolute; | |
top: 1.5em; | |
right: 1em; | |
width: 0.75em; | |
height: 0.75em; | |
border: 0.2em solid $semilight; | |
transform: rotate(45deg); | |
transform-origin: 50% 50%; | |
transition: opacity 0.2s; | |
} | |
&:before { | |
border-left: none; | |
border-top: none; | |
top: 1.2em; | |
} | |
&:after { | |
border-right: none; | |
border-bottom: none; | |
opacity: 0; | |
} | |
} | |
.mini-hack { | |
opacity: 0; | |
transform: translateY(-50%); | |
} |