.ct-option-select { display: flex; position: relative; width: 210px; } // Select input .ct-select-input { position: relative; width: 100%; input { display: flex; align-items: center; cursor: pointer; font-size: 13px; color: #555d66; width: inherit; height: 28px; margin: 0; padding: 0 0 0 8px; border: 1px solid #ddd; border-radius: 3px; // box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07); &:focus { outline: none; } &::-moz-placeholder { line-height: 26px; } &[readonly] { background-color: #fff; } &:hover { border-color: #5b9dd9; } } &[aria-expanded="true"] { input { border-color: #5b9dd9; } &:after { transform: rotate(90deg); } } &:before, &:after { position: absolute; content: ''; } &:before { top: 8px; right: 6px; width: 10px; height: 10px; background: #fff; border-radius: 100%; } &:after { font: 400 10px/10px dashicons; content: "\f341"; right: 8px; top: 10px; transform: rotate(-90deg); } } // Select dropdown .ct-select-dropdown { position: absolute; z-index: 10; width: 100%; max-height: 201px; top: 100%; margin-top: 7px; margin-bottom: 20px; overflow-y: scroll; font-size: 12px; color: #555d66; background: #fff; // border: 1px solid #ddd; border-radius: 3px; box-sizing: border-box; box-shadow: 0 15px 15px rgba(0, 0, 0, 0.08); .ct-select-no-results, .ct-select-dropdown-item, .ct-select-dropdown-group h2 { display: flex; align-items: center; height: 35px; margin: -1px 0 0 0; padding: 0 8px !important; border-top: 1px dashed #eee; box-sizing: border-box; } .ct-select-dropdown-item { cursor: pointer; position: relative; overflow: hidden; &.active { color: #272727; background: rgba(0, 0, 0, 0.02); } &.selected { color: #0073aa; font-weight: 500; &:after { position: absolute; content: '\f147'; font-family: dashicons; font-size: 13px; top: 10px; right: 6px; } } } .ct-select-dropdown-group h2 { font-size: 12px; background: #f7f7f7; } .ct-select-no-results { border-bottom: none; } }