.dropdownjs { position: relative; } .dropdownjs * { box-sizing: border-box; } .dropdownjs > input { width: 100%; cursor: pointer !important; } .dropdownjs > input.focus ~ ul { transform: scale(1); } .dropdownjs > ul { position: absolute; padding: 0; margin: 0; min-width: 200px; transform: scale(0); z-index: 10000; } .dropdownjs > ul[placement=top-left] { transform-origin: bottom left; bottom: 0; left: 0; } .dropdownjs > ul[placement=bottom-left] { transform-origin: top left; top: 0; left: 0; } .dropdownjs > ul > li { list-style: none; padding: 10px 20px; } /* Theme */ .dropdownjs > input { cursor: pointer; } .dropdownjs > ul { background: #FFF; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.12); transition: transform 0.2s ease-out; padding: 10px; overflow: auto; } .dropdownjs > ul > li { cursor: pointer; } .dropdownjs > ul > li.selected, .dropdownjs > ul > li:active { background-color: #eaeaea; } .dropdownjs > ul > li:focus { outline: 0; background-color: #d4d4d4; }