div.fancy-select { position: relative; font-weight: bold; text-transform: uppercase; font-size: 13px; color: #4ebeff; width: 100%; z-index: 25; } div.fancy-select.disabled { opacity: 0.5; } div.fancy-select select:focus + div.trigger { box-shadow: 0 0 0 2px #4B5468; } div.fancy-select select:focus + div.trigger.open { box-shadow: none; } div.fancy-select div.trigger { border-radius: 4px; cursor: pointer; padding: 10px 24px 10px 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; background: rgba(255, 255, 255, 0.1); border: none; color: #fff; letter-spacing: 2px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; line-height: 1.42857; width: 100%; font-size: 1.6em; text-transform: capitalize; z-index: 99999999999; font-weight: 300; transition: all 240ms ease-out; -webkit-transition: all 240ms ease-out; -moz-transition: all 240ms ease-out; -ms-transition: all 240ms ease-out; -o-transition: all 240ms ease-out; font-family: 'bebas_neuebold'; } div.fancy-select div.trigger:after { content: ""; display: block; position: absolute; width: 0; height: 0; border: 5px solid transparent; border-top-color: #fad817; top: 23px; right: 9px; } div.fancy-select div.trigger.open { background: rgba(255, 255, 255, 0.05); border: none; color: rgba(255, 255, 255, 0.2); box-shadow: none; } div.fancy-select div.trigger.open:after { border-top-color: rgba(255, 255, 255, 0.2); } div.fancy-select ul.options { list-style: none; margin: 0; position: absolute; top: 40px; left: 0; visibility: hidden; opacity: 0; z-index: 500; max-height: 250px; overflow: auto; background: #fad817; border-radius: 4px; border-top: 1px solid #bca312; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); width: 100%; transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out; -webkit-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out; -moz-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out; -ms-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out; -o-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out; padding: 0; } div.fancy-select ul.options.open { visibility: visible; top: 50px; opacity: 1; /* have to use a non-visibility transition to prevent this iOS issue (bug?): */ /*http://stackoverflow.com/questions/10736478/css-animation-visibility-visible-works-on-chrome-and-safari-but-not-on-ios*/ transition: opacity 300ms ease-out, top 300ms ease-out; -webkit-transition: opacity 300ms ease-out, top 300ms ease-out; -moz-transition: opacity 300ms ease-out, top 300ms ease-out; -ms-transition: opacity 300ms ease-out, top 300ms ease-out; -o-transition: opacity 300ms ease-out, top 300ms ease-out; z-index: 500; } div.fancy-select ul.options.overflowing { top: auto; bottom: 40px; transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out; -webkit-transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out; -moz-transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out; -ms-transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out; -o-transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out; } div.fancy-select ul.options.overflowing.open { top: auto; bottom: 50px; transition: opacity 300ms ease-out, bottom 300ms ease-out; -webkit-transition: opacity 300ms ease-out, bottom 300ms ease-out; -moz-transition: opacity 300ms ease-out, bottom 300ms ease-out; -ms-transition: opacity 300ms ease-out, bottom 300ms ease-out; -o-transition: opacity 300ms ease-out, bottom 300ms ease-out; } div.fancy-select ul.options li { padding: 15px 12px; color: #353535; cursor: pointer; white-space: nowrap; transition: all 150ms ease-out; -webkit-transition: all 150ms ease-out; -moz-transition: all 150ms ease-out; -ms-transition: all 150ms ease-out; -o-transition: all 150ms ease-out; border-bottom: 1px dashed #e9c916; } div.fancy-select ul.options li.selected { background: #e9c916; color: #000; } div.fancy-select ul.options li.hover { color: #000; }