LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400);
*,
*:before,
*:after {
  box-sizing: border-box;
}
body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.select {
  width: 30%;
  position: relative;
}
.select select {
  background: #72808A;
  border: none;
  padding: 1rem;
  font-size: 1rem;
  width: 100%;
  cursor: pointer;
  font-family: 'Source Sans Pro', sans-serif;
  color: #ecf0f1;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}
.select select:hover,
.select selectfocus {
  background: #34495e;
  border: #34495e;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}
.select .select-wrapper.rotate:before {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}
.select .select-wrapper:before {
  content: '\f107';
  font-family: FontAwesome;
  font-size: 1.4rem;
  color: #fff;
  display: inline-block;
  position: absolute;
  right: 20px;
  top: 15px;
  pointer-events: none;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}
JS
$(function(){
  $("select").on('click',function(){
    $(".select .select-wrapper").toggleClass("rotate");
  });
});

Description

The is used to group related options in a drop-down list.
Term
Sat, 04/14/2018 - 20:45

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv