wedding-rsvp-rs/templates/css/select.css

.select-box {
  font-family: Montserrat-Bold;
  font-size: 14px;
  z-index: 2;
  position: relative;
  display: block;
  width: 100%;
  margin: 0 auto;
  color: #60666d;
  margin-bottom: 20px;
}
@media (min-width: 1200px) {
  .select-box {
    width: 100%;
    border-radius: 25px;
  }
}
.select-box__current {
  position: relative;
  cursor: pointer;
  outline: none;
  border-radius: 25px;
}
.select-box__list li label {
  margin-bottom: 0px;
  padding-left: 30px;
}
.select-box__current:focus + .select-box__list {
  opacity: 1;
  -webkit-animation-name: none;
          animation-name: none;
}
.select-box__current:focus .shadow-input1 {
  -webkit-animation: anim-shadow 0.5s ease-in-out forwards;
  animation: anim-shadow 0.7s ease-in-out forwards;
}
.select-box__value {
  display: flex;
}
.select-box__input {
  display: none;
}
.select-box__input:checked + .select-box__input-text {
  display: block;
  font-family: Montserrat-Bold;
  font-size: 14px;
  padding-left: 30px;
}
.select-box__input-text {
  display: none;
  width: 100%;
  margin: 0;
  padding: 15px;
  border-radius: 25px;
  background: #e6e6e6;
  color: #666666;
}
.select-box__default-text {
  color: #bcbcbc;
}
.select-box__list {
  position: absolute;
  width: 100%;
  padding: 0;
  list-style: none;
  opacity: 0;
  -webkit-animation-name: HideList;
          animation-name: HideList;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-timing-function: step-start;
          animation-timing-function: step-start;
}
.select-box__option {
  display: block;
  padding: 15px;
  background-color: #fff;
}
.select-box__option:hover, .select-box__option:focus {
  color: #546c84;
  background-color: #fbfbfb;
}

@-webkit-keyframes HideList {
  from {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  to {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
}

@keyframes HideList {
  from {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  to {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
}