div.selectEmulator { display: inline-block; cursor: pointer; position: relative; } div.selectEmulator .curValue { display: block; border: 1px solid #005cbf; padding: 7px 30px 7px 15px; min-width: 250px; background-color: #4285f4; box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); color: white; text-align: left; } div.selectEmulator .curValue:hover::before { background-color: #3676cd; } div.selectEmulator .curValue::after { display: inline-block; position: absolute; top: 12px; right: 10px; content: ''; border-top: 6px solid; border-right: 6px solid transparent; border-bottom: 0; border-left: 6px solid transparent; z-index: 3; } div.selectEmulator .curValue::before { display: inline-block; position: absolute; top: 0; right: 0; width: 31px; height: 100%; content: ''; box-shadow: 0 0 5px rgba(0, 0, 0, 0.33); transition: all 0.15s linear; z-index: 2; } div.selectEmulator select { display: none; } div.selectEmulator img.dropDown { float: right; margin-right: 5px; margin-top: 10px; width: 20px; } div.selectEmulator ul.options { display: none; border: 1px solid lightgrey; margin: 0; position: absolute; width: 100%; z-index: 3; padding: 5px; background: white; color: rgba(0, 0, 0, 0.8); max-height: 300px; overflow-y: auto; } div.selectEmulator ul.options li { padding: 7px 15px; list-style-type: none; margin: 0; text-align: left; transition: all 0.15s linear; border-bottom: 2px solid white; } div.selectEmulator ul.options li:hover { background-color: rgba(66, 133, 244, 0.8); color: white; } div.selectEmulator ul.options li.selected { background-color: #4285f4; color: white; } div.selectEmulator ul.options li:last-of-type { border-bottom: none; } div.selectEmulator ul.options img { vertical-align: middle; } div.selectEmulator span.curValue img, div.selectEmulator ul.options img { vertical-align: middle; }