div.customInputSelect { display: inline-block; position: relative; } div.customInputSelect.Phelic_Category { /** @see Phelic\Model\AbstractCategory */ display: block; margin-bottom: 10px; background-size: 10px; background-position: left top 2px; } div.customInputSelect.Phelic_Category + div.customInputSelect.Phelic_Category { background-image: url('../graphX/icons/subArrow.png'); padding-left: 15px; } div.customInputSelect.Phelic_Category + div.customInputSelect.Phelic_Category + div.customInputSelect.Phelic_Category { padding-left: 30px; background-position: left 15px top 2px; } div.customInputSelect.Phelic_Category + div.customInputSelect.Phelic_Category + div.customInputSelect.Phelic_Category + div.customInputSelect.Phelic_Category { padding-left: 45px; background-position: left 30px top 2px; } div.customInputSelect.Phelic_Category + div.customInputSelect.Phelic_Category + div.customInputSelect.Phelic_Category + div.customInputSelect.Phelic_Category + div.customInputSelect.Phelic_Category { padding-left: 60px; background-position: left 45px top 2px; } div.customInputSelect.Phelic_Category + div.customInputSelect.Phelic_Category + div.customInputSelect.Phelic_Category + div.customInputSelect.Phelic_Category + div.customInputSelect.Phelic_Category + div.customInputSelect.Phelic_Category { padding-left: 75px; background-position: left 60px top 2px; } div.customInputSelect.Phelic_Category + div.customInputSelect.Phelic_Category + div.customInputSelect.Phelic_Category + div.customInputSelect.Phelic_Category + div.customInputSelect.Phelic_Category + div.customInputSelect.Phelic_Category + div.customInputSelect.Phelic_Category { padding-left: 90px; background-position: left 75px top 2px; } div.customInputSelect .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; } div.customInputSelect .curValue:hover, div.customInputSelect .curValue div.customInputSelect li.selected { background-color: #3676cd; } div.customInputSelect ul.options { border: 1px solid lightgrey; display: none; margin: 0; max-height: 200px; overflow-x: hidden; overflow-y: auto; position: absolute; width: 100%; z-index: 1; cursor: pointer; padding: 0; background: white; } div.customInputSelect ul.options li { padding: 7px 15px; list-style-type: none; margin: 0 5px; text-align: left; transition: all 0.15s linear; border-bottom: 2px solid white; color: rgba(0, 0, 0, 0.8); } div.customInputSelect ul.options li:first-of-type { margin-top: 5px; } div.customInputSelect ul.options li:last-of-type { margin-bottom: 5px; } div.customInputSelect ul.options li:hover { background-color: rgba(66, 133, 244, 0.8); color: white; } div.customInputSelect ul.options li.selected { background-color: #4285f4; color: white; } div.customInputSelect ul.options li:last-of-type { border-bottom: none; }