You can change the css to fit your design:
<style>
.sdd-wrapper {
 position: relative !important;
 width: 100%;
 font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
 font-size: 13px;
 --accent: #2563eb;
 --accent-light: #eff6ff;
 --border: #e2e8f0;
 --border-focus: #93c5fd;
 --text: #0f172a;
 --text-muted: #94a3b8;
 --bg: #ffffff;
 --bg-hover: #f8fafc;
 --radius: 10px;
 box-sizing: border-box;
 overflow: visible !important;
 z-index: 9999 !important;
}

.sdd-wrapper *, .sdd-wrapper *::before, .sdd-wrapper *::after {
 box-sizing: inherit;
}

/* ── Trigger ── */
.sdd-trigger {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 8px;
 padding: 0 14px;
 height: 100%;
 min-height: 42px;
 border: 1.5px solid var(--border);
 border-radius: var(--radius);
 background: var(--bg);
 cursor: pointer;
 transition: all .2s ease;
 user-select: none;
}

.sdd-trigger:hover {
 border-color: var(--border-focus);
 background: var(--bg-hover);
}

.sdd-wrapper.sdd-open .sdd-trigger {
 border-color: var(--accent);
 border-bottom-color: transparent;
 border-bottom-left-radius: 0;
 border-bottom-right-radius: 0;
 box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}

/* ── Selected text ── */
.sdd-selected-text {
 flex: 1;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 color: var(--text);
 font-weight: 500;
 font-size: 13px;
 letter-spacing: -0.01em;
}

.sdd-selected-text.sdd-placeholder {
 color: var(--text-muted);
 font-weight: 400;
}

/* ── Icons ── */
.sdd-icons {
 display: flex;
 align-items: center;
 gap: 4px;
 flex-shrink: 0;
}

.sdd-clear-btn {
 display: none;
 align-items: center;
 justify-content: center;
 width: 20px;
 height: 20px;
 border: none;
 background: #f1f5f9;
 cursor: pointer;
 color: var(--text-muted);
 font-size: 10px;
 border-radius: 50%;
 line-height: 1;
 transition: all .15s ease;
 font-weight: 700;
}

.sdd-clear-btn:hover {
 color: #ef4444;
 background: #fee2e2;
}

.sdd-wrapper.sdd-has-value .sdd-clear-btn {
 display: inline-flex;
}

/* Chevron — pure CSS, no font icon needed */
.sdd-arrow {
 width: 16px;
 height: 16px;
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--text-muted);
 flex-shrink: 0;
}

.sdd-arrow::after {
 content: '';
 display: block;
 width: 7px;
 height: 7px;
 border-right: 1.5px solid currentColor;
 border-bottom: 1.5px solid currentColor;
 transform: rotate(45deg) translateY(-2px);
 transition: transform .2s ease;
}

.sdd-wrapper.sdd-open .sdd-arrow::after {
 transform: rotate(-135deg) translateY(-2px);
}

/* ── Dropdown panel ── */
.sdd-dropdown {
 display: none;
 position: absolute;
 top: 100%;
 left: 0;
 right: 0;
 background: var(--bg);
 border: 1.5px solid var(--accent);
 border-top: none;
 border-bottom-left-radius: var(--radius);
 border-bottom-right-radius: var(--radius);
 box-shadow: var(--shadow-lg);
 z-index: 99999;
 overflow: hidden;
 animation: sddIn .12s ease;
}

.sdd-wrapper.sdd-open .sdd-dropdown { display: block; }

@keyframes sddIn {
 from { opacity: 0; transform: translateY(-4px); }
 to   { opacity: 1; transform: translateY(0); }
}

/* ── Search ── */
.sdd-search-wrap {
 padding: 10px;
 background: #fafbfc;
 border-bottom: 1px solid var(--border);
}

.sdd-search {
 width: 100%;
 padding: 8px 10px 8px 32px;
 border: 1.5px solid var(--border);
 border-radius: 7px;
 font-size: 12.5px;
 font-family: inherit;
 color: var(--text);
 outline: none;
 background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 10px center;
 transition: border-color .15s, box-shadow .15s;
}

.sdd-search::placeholder { color: var(--text-muted); }

.sdd-search:focus {
 border-color: var(--accent);
 box-shadow: 0 0 0 2px rgba(37,99,235,.12);
}

/* ── List ── */
.sdd-list {
 list-style: none;
 margin: 0;
 padding: 6px;
 max-height: 220px;
 overflow-y: auto;
 display: flex;
 flex-direction: column;
 gap: 1px;
}

.sdd-list::-webkit-scrollbar { width: 4px; }
.sdd-list::-webkit-scrollbar-track { background: transparent; }
.sdd-list::-webkit-scrollbar-thumb {
 background: #e2e8f0;
 border-radius: 99px;
}

/* ── Items ── */
.sdd-item {
 padding: 8px 10px;
 cursor: pointer;
 border-radius: 6px;
 transition: background .1s ease, color .1s ease;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 color: var(--text);
 font-size: 13px;
 font-weight: 400;
 letter-spacing: -0.01em;
}

.sdd-item:hover {
 background: var(--accent-light);
 color: var(--accent);
}

.sdd-item.sdd-selected {
 background: var(--accent-light);
 color: var(--accent);
 font-weight: 500;
 display: flex;
 align-items: center;
 justify-content: space-between;
}

.sdd-item.sdd-selected::after {
 content: '';
 display: inline-block;
 width: 14px;
 height: 14px;
 flex-shrink: 0;
 background: var(--accent);
 border-radius: 50%;
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
 background-repeat: no-repeat;
 background-position: center;
 background-size: 9px;
}

/* ── Search highlight ── */
.sdd-item mark {
 background: #fef08a;
 color: #713f12;
 border-radius: 3px;
 padding: 0 2px;
 font-style: normal;
}

/* ── No results ── */
.sdd-no-results {
 display: none;
 padding: 24px 16px;
 text-align: center;
 color: var(--text-muted);
 font-size: 12.5px;
 line-height: 1.5;
}

.sdd-no-results::before {
 content: '∅';
 display: block;
 font-size: 20px;
 margin-bottom: 6px;
 opacity: 0.35;
}
   
.disabled {
pointer-events: none
}
</style>