.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); } }