listbox and select box (#23504)

* listbox * select box * fix tests * one more test
2026-01-14 01:25:37 -05:00 · 2023-06-28 11:20:31 -07:00
parent e52aa01cf0
commit 6dc1b9b905
31 changed files with 159 additions and 414 deletions
--- a/src/sql/base/browser/ui/listBox/listBox.ts
+++ b/src/sql/base/browser/ui/listBox/listBox.ts
@@ -3,8 +3,7 @@
 *  Licensed under the Source EULA. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

-import { SelectBox, ISelectOptionItem } from 'vs/base/browser/ui/selectBox/selectBox';
-import { Color } from 'vs/base/common/color';
+import { SelectBox, ISelectOptionItem, ISelectBoxStyles } from 'vs/base/browser/ui/selectBox/selectBox';
 import { isUndefinedOrNull } from 'vs/base/common/types';
 import { IMessage, MessageType } from 'vs/base/browser/ui/inputbox/inputBox';
 import * as dom from 'vs/base/browser/dom';
@@ -12,40 +11,26 @@ import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { IContextViewProvider, AnchorAlignment } from 'vs/base/browser/ui/contextview/contextview';
 import { Emitter } from 'vs/base/common/event';
 import { renderFormattedText, renderText, FormattedTextRenderOptions } from 'vs/base/browser/formattedTextRenderer';
-import { defaultSelectBoxStyles } from 'vs/platform/theme/browser/defaultStyles';

 const $ = dom.$;

-export interface IListBoxStyles {
-	selectBackground?: Color;
-	selectForeground?: Color;
-	selectBorder?: Color;
-	inputValidationInfoBorder?: Color;
-	inputValidationInfoBackground?: Color;
-	inputValidationWarningBorder?: Color;
-	inputValidationWarningBackground?: Color;
-	inputValidationErrorBorder?: Color;
-	inputValidationErrorBackground?: Color;
+export interface IListBoxStyles extends ISelectBoxStyles {
+	inputValidationInfoBorder: string | undefined;
+	inputValidationInfoBackground: string | undefined;
+	inputValidationWarningBorder: string | undefined;
+	inputValidationWarningBackground: string | undefined;
+	inputValidationErrorBorder: string | undefined;
+	inputValidationErrorBackground: string | undefined;
+}
+
+export interface IListBoxOptions extends Partial<IListBoxStyles> {
+	items: ISelectOptionItem[];
 }

 /*
 *  Extends SelectBox to allow multiple selection and adding/remove items dynamically
 */
 export class ListBox extends SelectBox {
-	// private enabledSelectBackground?: Color;
-	// private enabledSelectForeground?: Color;
-	// private enabledSelectBorder?: Color;
-	// private disabledSelectBackground?: Color;
-	// private disabledSelectForeground?: Color;
-	// private disabledSelectBorder?: Color;
-
-	private inputValidationInfoBorder?: Color;
-	private inputValidationInfoBackground?: Color;
-	private inputValidationWarningBorder?: Color;
-	private inputValidationWarningBackground?: Color;
-	private inputValidationErrorBorder?: Color;
-	private inputValidationErrorBackground?: Color;
-
 	private message?: IMessage;
 	private contextViewProvider: IContextViewProvider;
 	private isValid: boolean;
@@ -53,11 +38,10 @@ export class ListBox extends SelectBox {
 	private _onKeyDown = new Emitter<StandardKeyboardEvent>();
 	public readonly onKeyDown = this._onKeyDown.event;

-	constructor(
-		private options: ISelectOptionItem[],
+	constructor(private readonly options: IListBoxOptions,
 		contextViewProvider: IContextViewProvider) {

-		super(options, 0, contextViewProvider, defaultSelectBoxStyles);
+		super(options.items, 0, contextViewProvider, <ISelectBoxStyles>options);
 		this.contextViewProvider = contextViewProvider;
 		this.isValid = true;
 		this.selectElement.multiple = true;
@@ -78,53 +62,20 @@ export class ListBox extends SelectBox {
 			this.selectElement.focus();
 		}));

-		// this.enabledSelectBackground = this.selectBackground;
-		// this.enabledSelectForeground = this.selectForeground;
-		// this.enabledSelectBorder = this.selectBorder;
-		//this.disabledSelectBackground = Color.transparent;
-
-		// this.inputValidationInfoBorder = defaultOpts.inputValidationInfoBorder;
-		// this.inputValidationInfoBackground = defaultOpts.inputValidationInfoBackground;
-		// this.inputValidationWarningBorder = defaultOpts.inputValidationWarningBorder;
-		// this.inputValidationWarningBackground = defaultOpts.inputValidationWarningBackground;
-		// this.inputValidationErrorBorder = defaultOpts.inputValidationErrorBorder;
-		// this.inputValidationErrorBackground = defaultOpts.inputValidationErrorBackground;
-
 		this.onblur(this.selectElement, () => this.onBlur());
 		this.onfocus(this.selectElement, () => this.onFocus());
 	}

-	// {{SQL CARBON TODO}} - apply styles
-	public style(styles: IListBoxStyles): void {
-		// 	let superStyle: ISelectBoxStyles = {
-		// 		selectBackground: styles.selectBackground,
-		// 		selectForeground: styles.selectForeground,
-		// 		selectBorder: styles.selectBorder
-		// 	};
-		// 	super.style(superStyle);
-		// 	this.enabledSelectBackground = this.selectBackground;
-		// 	this.enabledSelectForeground = this.selectForeground;
-		// 	this.enabledSelectBorder = this.selectBorder;
-
-		// 	this.inputValidationInfoBackground = styles.inputValidationInfoBackground;
-		// 	this.inputValidationInfoBorder = styles.inputValidationInfoBorder;
-		// 	this.inputValidationWarningBackground = styles.inputValidationWarningBackground;
-		// 	this.inputValidationWarningBorder = styles.inputValidationWarningBorder;
-		// 	this.inputValidationErrorBackground = styles.inputValidationErrorBackground;
-		// 	this.inputValidationErrorBorder = styles.inputValidationErrorBorder;
-	}
-
 	public setValidation(isValid: boolean, message?: IMessage): void {
 		this.isValid = isValid;
 		this.message = message;

-		// {{SQL CARBON TODO}} - apply styles
-		// if (this.isValid) {
-		// 	this.selectElement.style.border = `1px solid ${this.selectBorder}`;
-		// } else if (this.message) {
-		// 	const styles = this.stylesForType(this.message.type);
-		// 	this.selectElement.style.border = styles.border ? `1px solid ${styles.border}` : '';
-		// }
+		if (this.isValid) {
+			this.selectElement.style.border = `1px solid ${this.options.selectBorder}`;
+		} else if (this.message) {
+			const styles = this.stylesForType(this.message.type);
+			this.selectElement.style.border = styles.border ? `1px solid ${styles.border}` : '';
+		}
 	}

 	public get isContentValid(): boolean {
@@ -153,9 +104,9 @@ export class ListBox extends SelectBox {

 		for (let i = 0; i < indexes.length; i++) {
 			this.selectElement.remove(indexes[i]);
-			this.options.splice(indexes[i], 1);
+			this.options.items.splice(indexes[i], 1);
 		}
-		super.setOptions(this.options);
+		super.setOptions(this.options.items);
 	}

 	public add(option: string): void {
@@ -163,29 +114,21 @@ export class ListBox extends SelectBox {
 		this.selectElement.add(optionObj);

 		// make sure that base options are updated since that is used in selection not selectElement
-		this.options.push(optionObj);
-		super.setOptions(this.options);
+		this.options.items.push(optionObj);
+		super.setOptions(this.options.items);
 	}

 	public override setOptions(options: ISelectOptionItem[], selected?: number): void {
-		this.options = options;
+		this.options.items = options;
 		super.setOptions(options, selected);
 	}

 	public enable(): void {
 		this.selectElement.disabled = false;
-		// this.selectBackground = this.enabledSelectBackground;
-		// this.selectForeground = this.enabledSelectForeground;
-		// this.selectBorder = this.enabledSelectBorder;
-		// this.applyStyles();
 	}

 	public disable(): void {
 		this.selectElement.disabled = true;
-		// this.selectBackground = this.disabledSelectBackground;
-		// this.selectForeground = this.disabledSelectForeground;
-		// this.selectBorder = this.disabledSelectBorder;
-		// this.applyStyles();
 	}

 	public onBlur(): void {
@@ -227,7 +170,7 @@ export class ListBox extends SelectBox {
 					spanElement.classList.add(this.classForType(this.message.type));

 					const styles = this.stylesForType(this.message.type);
-					spanElement.style.backgroundColor = styles.background ? styles.background.toString() : '';
+					spanElement.style.backgroundColor = styles.background ? styles.background : '';
 					spanElement.style.border = styles.border ? `1px solid ${styles.border}` : '';

 					dom.append(div, spanElement);
@@ -247,11 +190,11 @@ export class ListBox extends SelectBox {
 		}
 	}

-	private stylesForType(type?: MessageType): { border?: Color; background?: Color } {
+	private stylesForType(type?: MessageType): { border: string | undefined; background: string | undefined } {
 		switch (type) {
-			case MessageType.INFO: return { border: this.inputValidationInfoBorder, background: this.inputValidationInfoBackground };
-			case MessageType.WARNING: return { border: this.inputValidationWarningBorder, background: this.inputValidationWarningBackground };
-			default: return { border: this.inputValidationErrorBorder, background: this.inputValidationErrorBackground };
+			case MessageType.INFO: return { border: this.options.inputValidationInfoBorder, background: this.options.inputValidationInfoBackground };
+			case MessageType.WARNING: return { border: this.options.inputValidationWarningBorder, background: this.options.inputValidationWarningBackground };
+			default: return { border: this.options.inputValidationErrorBorder, background: this.options.inputValidationErrorBackground };
 		}
 	}
 }
--- a/src/sql/base/browser/ui/selectBox/selectBox.ts
+++ b/src/sql/base/browser/ui/selectBox/selectBox.ts
@@ -6,7 +6,6 @@
 import 'vs/css!./media/selectBox';

 import { SelectBox as vsSelectBox, ISelectBoxStyles as vsISelectBoxStyles, ISelectBoxOptions, ISelectOptionItem, ISelectData } from 'vs/base/browser/ui/selectBox/selectBox';
-import { Color } from 'vs/base/common/color';
 import { IContextViewProvider, AnchorAlignment } from 'vs/base/browser/ui/contextview/contextview';
 import * as dom from 'vs/base/browser/dom';
 import { IMessage, MessageType } from 'vs/base/browser/ui/inputbox/inputBox';
@@ -18,7 +17,6 @@ import { KeyCode } from 'vs/base/common/keyCodes';
 import { SelectBoxList } from 'vs/base/browser/ui/selectBox/selectBoxCustom';
 import { Event, Emitter } from 'vs/base/common/event';
 import { AdsWidget } from 'sql/base/browser/ui/adsWidget';
-import { defaultSelectBoxStyles } from 'vs/platform/theme/browser/defaultStyles';

 const $ = dom.$;

@@ -28,17 +26,12 @@ export interface SelectOptionItemSQL extends ISelectOptionItem {
 }

 export interface ISelectBoxStyles extends vsISelectBoxStyles {
-	disabledSelectBackground?: Color;
-	disabledSelectForeground?: Color;
-	inputValidationInfoBorder?: Color;
-	inputValidationInfoBackground?: Color;
-	inputinputValidationInfoForeground?: Color;
-	inputValidationWarningBorder?: Color;
-	inputValidationWarningBackground?: Color;
-	inputValidationWarningForeground?: Color;
-	inputValidationErrorBorder?: Color;
-	inputValidationErrorBackground?: Color;
-	inputValidationErrorForeground?: Color;
+	inputValidationInfoBorder: string | undefined;
+	inputValidationInfoBackground: string | undefined;
+	inputValidationWarningBorder: string | undefined;
+	inputValidationWarningBackground: string | undefined;
+	inputValidationErrorBorder: string | undefined;
+	inputValidationErrorBackground: string | undefined;
 }

 export class SelectBox extends vsSelectBox implements AdsWidget {
@@ -46,32 +39,16 @@ export class SelectBox extends vsSelectBox implements AdsWidget {
 	private _dialogOptions: SelectOptionItemSQL[];
 	private _selectedOption: string;
 	private _selectBoxOptions?: ISelectBoxOptions;
-	// private enabledSelectBackground?: Color;
-	// private enabledSelectForeground?: Color;
-	// private enabledSelectBorder?: Color;
-	// private disabledSelectBackground?: Color;
-	// private disabledSelectForeground?: Color;
-	// private disabledSelectBorder?: Color;
 	private contextViewProvider: IContextViewProvider;
 	private message?: IMessage;
 	private _onDidSelect: Emitter<ISelectData>;
 	private _onDidFocus: Emitter<void>;

-	private inputValidationInfoBorder?: Color;
-	private inputValidationInfoBackground?: Color;
-	private inputValidationInfoForeground?: Color;
-	private inputValidationWarningBorder?: Color;
-	private inputValidationWarningBackground?: Color;
-	private inputValidationWarningForeground?: Color;
-	private inputValidationErrorBorder?: Color;
-	private inputValidationErrorBackground?: Color;
-	private inputValidationErrorForeground?: Color;
-
 	private element?: HTMLElement;

-	constructor(options: SelectOptionItemSQL[] | string[], selectedOption: string, contextViewProvider: IContextViewProvider, container?: HTMLElement, selectBoxOptions?: ISelectBoxOptions, id?: string) {
+	constructor(options: SelectOptionItemSQL[] | string[], selectedOption: string, private readonly _styles: ISelectBoxStyles, contextViewProvider: IContextViewProvider, container?: HTMLElement, selectBoxOptions?: ISelectBoxOptions, id?: string) {
 		let optionItems: SelectOptionItemSQL[] = SelectBox.createOptions(options);
-		super(optionItems, 0, contextViewProvider, defaultSelectBoxStyles, selectBoxOptions);
+		super(optionItems, 0, contextViewProvider, _styles, selectBoxOptions);

 		this._onDidSelect = new Emitter<ISelectData>();
 		this._onDidFocus = new Emitter<void>();
@@ -89,13 +66,6 @@ export class SelectBox extends vsSelectBox implements AdsWidget {
 			this._onDidSelect.fire(newSelect);
 		}));

-		// {{SQL CARBON TODO}} - fix styles
-		// this.enabledSelectBackground = this.selectBackground;
-		// this.enabledSelectForeground = this.selectForeground;
-		// this.enabledSelectBorder = this.selectBorder;
-		// this.disabledSelectBackground = Color.transparent;
-		// this.disabledSelectForeground = undefined;
-		// this.disabledSelectBorder = undefined;
 		this.contextViewProvider = contextViewProvider;
 		if (container) {
 			this.element = dom.append(container, $('.monaco-selectbox.idle'));
@@ -180,24 +150,6 @@ export class SelectBox extends vsSelectBox implements AdsWidget {
 		this._dialogOptions = options;
 	}

-	public style(styles: ISelectBoxStyles): void {
-		// this.enabledSelectBackground = this.selectBackground;
-		// this.enabledSelectForeground = this.selectForeground;
-		// this.enabledSelectBorder = this.selectBorder;
-		// this.disabledSelectBackground = styles.disabledSelectBackground;
-		// this.disabledSelectForeground = styles.disabledSelectForeground;
-		this.inputValidationInfoBorder = styles.inputValidationInfoBorder;
-		this.inputValidationInfoBackground = styles.inputValidationInfoBackground;
-		this.inputValidationInfoForeground = styles.inputinputValidationInfoForeground;
-		this.inputValidationWarningBorder = styles.inputValidationWarningBorder;
-		this.inputValidationWarningBackground = styles.inputValidationWarningBackground;
-		this.inputValidationWarningForeground = styles.inputValidationWarningForeground;
-		this.inputValidationErrorBorder = styles.inputValidationErrorBorder;
-		this.inputValidationErrorBackground = styles.inputValidationErrorBackground;
-		this.inputValidationErrorForeground = styles.inputValidationErrorForeground;
-		//this.applyStyles();
-	}
-
 	public selectWithOptionName(optionName?: string, selectFirstByDefault: boolean = true, forceSelectionEvent: boolean = false): void {
 		let option: number | undefined;
 		if (optionName !== undefined) {
@@ -245,18 +197,10 @@ export class SelectBox extends vsSelectBox implements AdsWidget {

 	public enable(): void {
 		this.selectElement.disabled = false;
-		// this.selectBackground = this.enabledSelectBackground;
-		// this.selectForeground = this.enabledSelectForeground;
-		// this.selectBorder = this.enabledSelectBorder;
-		//this.applyStyles();
 	}

 	public disable(): void {
 		this.selectElement.disabled = true;
-		// this.selectBackground = this.disabledSelectBackground;
-		// this.selectForeground = this.disabledSelectForeground;
-		// this.selectBorder = this.disabledSelectBorder;
-		//this.applyStyles();
 	}

 	public getAriaLabel(): string {
@@ -323,7 +267,7 @@ export class SelectBox extends vsSelectBox implements AdsWidget {
 					spanElement.classList.add(this.classForType(message.type));

 					const styles = this.stylesForType(message.type);
-					spanElement.style.backgroundColor = styles.background ? styles.background.toString() : '';
+					spanElement.style.backgroundColor = styles.background ? styles.background : '';
 					spanElement.style.border = styles.border ? `1px solid ${styles.border}` : '';

 					dom.append(div, spanElement);
@@ -363,11 +307,11 @@ export class SelectBox extends vsSelectBox implements AdsWidget {
 		}
 	}

-	private stylesForType(type: MessageType | undefined): { border: Color | undefined; background: Color | undefined; foreground: Color | undefined } {
+	private stylesForType(type: MessageType | undefined): { border: string | undefined; background: string | undefined; } {
 		switch (type) {
-			case MessageType.INFO: return { border: this.inputValidationInfoBorder, background: this.inputValidationInfoBackground, foreground: this.inputValidationInfoForeground };
-			case MessageType.WARNING: return { border: this.inputValidationWarningBorder, background: this.inputValidationWarningBackground, foreground: this.inputValidationWarningForeground };
-			default: return { border: this.inputValidationErrorBorder, background: this.inputValidationErrorBackground, foreground: this.inputValidationErrorForeground };
+			case MessageType.INFO: return { border: this._styles.inputValidationInfoBorder, background: this._styles.inputValidationInfoBackground };
+			case MessageType.WARNING: return { border: this._styles.inputValidationWarningBorder, background: this._styles.inputValidationWarningBackground };
+			default: return { border: this._styles.inputValidationErrorBorder, background: this._styles.inputValidationErrorBackground };
 		}
 	}

--- a/src/sql/base/browser/ui/table/tableCellEditorFactory.ts
+++ b/src/sql/base/browser/ui/table/tableCellEditorFactory.ts
@@ -12,7 +12,7 @@ import { Dropdown, IEditableDropdownStyles } from 'sql/base/browser/ui/editableD
 import { Disposable } from 'vs/base/common/lifecycle';
 import { defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles';
 import { IInputBoxStyles } from 'vs/base/browser/ui/inputbox/inputBox';
-import { ISelectBoxStyles } from 'vs/base/browser/ui/selectBox/selectBox';
+import { ISelectBoxStyles } from 'sql/base/browser/ui/selectBox/selectBox';

 const InverseKeyCodeMap: { [k: string]: number } = Object.fromEntries(Object.entries(EVENT_KEY_CODE_MAP).map(([key, value]) => [value, Number(key)]));

@@ -169,7 +169,7 @@ export class TableCellEditorFactory {
 						await this.commitEdit();
 					});
 				} else {
-					this._component = new SelectBox([], undefined, self._contextViewProvider);
+					this._component = new SelectBox([], undefined, self._options.selectBoxStyles, self._contextViewProvider);
 					this._component.render(container);
 					this._component.selectElem.style.height = '100%';
 					this._component.onDidSelect(async () => {
--- a/src/sql/base/test/browser/ui/selectBox/selectBox.test.ts
+++ b/src/sql/base/test/browser/ui/selectBox/selectBox.test.ts
@@ -4,7 +4,7 @@
 *--------------------------------------------------------------------------------------------*/

 import * as assert from 'assert';
-import { SelectBox, SelectOptionItemSQL } from 'sql/base/browser/ui/selectBox/selectBox';
+import { ISelectBoxStyles, SelectBox, SelectOptionItemSQL } from 'sql/base/browser/ui/selectBox/selectBox';
 import { deepClone, equals } from 'vs/base/common/objects';

 const options: SelectOptionItemSQL[] = [
@@ -15,13 +15,13 @@ const options: SelectOptionItemSQL[] = [
 suite('Select Box tests', () => {
 	test('default value', () => {

-		const sb = new SelectBox(options, options[1].value, undefined!, undefined!, undefined!);
+		const sb = new SelectBox(options, options[1].value, <ISelectBoxStyles>{}, undefined!, undefined!, undefined!);

 		assert(sb.value === options[1].value);
 	});

 	test('values change', () => {
-		const sb = new SelectBox(options, options[1].value, undefined!, undefined!, undefined!);
+		const sb = new SelectBox(options, options[1].value, <ISelectBoxStyles>{}, undefined!, undefined!, undefined!);
 		const newOptions = deepClone(options);
 		{
 			const moreOptions: SelectOptionItemSQL[] = [
@@ -37,7 +37,7 @@ suite('Select Box tests', () => {
 	});

 	test('the selected option changes', () => {
-		const sb = new SelectBox(options, options[1].value, undefined!, undefined!, undefined!);
+		const sb = new SelectBox(options, options[1].value, <ISelectBoxStyles>{}, undefined!, undefined!, undefined!);

 		sb.onSelect({
 			index: 0,
@@ -50,7 +50,7 @@ suite('Select Box tests', () => {

 	test('values get auto populated', () => {
 		const newOptions = deepClone(options).map(s => { return { text: s.text, value: s.text }; });
-		const sb = new SelectBox(newOptions, undefined!, undefined!, undefined!, undefined!);
+		const sb = new SelectBox(newOptions, undefined!, <ISelectBoxStyles>{}, undefined!, undefined!, undefined!);

 		assert(equals(sb.values, newOptions.map(s => s.text)));
 	});
--- a/src/sql/platform/browser/selectBox/selectBox.component.ts
+++ b/src/sql/platform/browser/selectBox/selectBox.component.ts
@@ -13,8 +13,7 @@ import { AngularDisposable } from 'sql/base/browser/lifecycle';

 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import { ISelectData } from 'vs/base/browser/ui/selectBox/selectBox';
-import { attachSelectBoxStyler } from 'sql/platform/theme/common/vsstyler';
-import { IThemeService } from 'vs/platform/theme/common/themeService';
+import { defaultSelectBoxStyles } from 'sql/platform/theme/browser/defaultStyles';

@Component({
 	selector: 'select-box',
@@ -34,14 +33,13 @@ export class SelectBox extends AngularDisposable implements OnInit, OnChanges {

 	constructor(
 		@Inject(forwardRef(() => ElementRef)) private _el: ElementRef,
-		@Inject(IThemeService) private themeService: IThemeService,
 		@Inject(IContextViewService) private contextViewService: IContextViewService
 	) {
 		super();
 	}

 	ngOnInit(): void {
-		this._selectbox = new sqlSelectBox(this.options, this.selectedOption, this.contextViewService, undefined, { ariaLabel: this.ariaLabel });
+		this._selectbox = new sqlSelectBox(this.options, this.selectedOption, defaultSelectBoxStyles, this.contextViewService, undefined, { ariaLabel: this.ariaLabel });
 		this._selectbox.render(this._el.nativeElement);
 		this._selectbox.onDidSelect(e => {
 			if (this.onlyEmitOnChange) {
@@ -53,7 +51,6 @@ export class SelectBox extends AngularDisposable implements OnInit, OnChanges {
 				this.onDidSelect.emit(e);
 			}
 		});
-		this._register(attachSelectBoxStyler(this._selectbox, this.themeService));
 	}

 	ngOnChanges(changes: SimpleChanges): void {
--- a/src/sql/platform/theme/browser/defaultStyles.ts
+++ b/src/sql/platform/theme/browser/defaultStyles.ts
@@ -5,16 +5,18 @@
 import { ICheckboxStyles } from 'sql/base/browser/ui/checkbox/checkbox';
 import { IDropdownStyles } from 'sql/base/browser/ui/dropdownList/dropdownList';
 import { IEditableDropdownStyles } from 'sql/base/browser/ui/editableDropdown/browser/dropdown';
+import { IListBoxStyles } from 'sql/base/browser/ui/listBox/listBox';
+import { ISelectBoxStyles } from 'sql/base/browser/ui/selectBox/selectBox';
 import { ITableFilterStyles } from 'sql/base/browser/ui/table/plugins/headerFilter.plugin';
 import *  as sqlcr from 'sql/platform/theme/common/colorRegistry';
 import { disabledCheckboxForeground } from 'sql/platform/theme/common/colors';
 import { IButtonStyles } from 'vs/base/browser/ui/button/button';
-import { IStyleOverride, defaultButtonStyles, defaultCountBadgeStyles, defaultInputBoxStyles, defaultListStyles, overrideStyles } from 'vs/platform/theme/browser/defaultStyles';
-import { asCssVariable, editorBackground, inputBorder, inputForeground } from 'vs/platform/theme/common/colorRegistry';
+import { IStyleOverride, defaultButtonStyles, defaultCountBadgeStyles, defaultInputBoxStyles, defaultListStyles, defaultSelectBoxStyles as vsDefaultSelectBoxStyles, overrideStyles } from 'vs/platform/theme/browser/defaultStyles';
+import * as cr from 'vs/platform/theme/common/colorRegistry';


 export const defaultCheckboxStyles: ICheckboxStyles = {
-	disabledCheckboxForeground: asCssVariable(disabledCheckboxForeground)
+	disabledCheckboxForeground: cr.asCssVariable(disabledCheckboxForeground)
 };

 export function getCheckboxStyles(override: IStyleOverride<ICheckboxStyles>): ICheckboxStyles {
@@ -22,10 +24,10 @@ export function getCheckboxStyles(override: IStyleOverride<ICheckboxStyles>): IC
 }

 export const defaultInfoButtonStyles: IButtonStyles = {
-	buttonBackground: asCssVariable(sqlcr.infoButtonBackground),
-	buttonForeground: asCssVariable(sqlcr.infoButtonForeground),
-	buttonBorder: asCssVariable(sqlcr.infoButtonBorder),
-	buttonHoverBackground: asCssVariable(sqlcr.infoButtonHoverBackground),
+	buttonBackground: cr.asCssVariable(sqlcr.infoButtonBackground),
+	buttonForeground: cr.asCssVariable(sqlcr.infoButtonForeground),
+	buttonBorder: cr.asCssVariable(sqlcr.infoButtonBorder),
+	buttonHoverBackground: cr.asCssVariable(sqlcr.infoButtonHoverBackground),
 	buttonSeparator: undefined,
 	buttonSecondaryBackground: undefined,
 	buttonSecondaryForeground: undefined,
@@ -37,8 +39,8 @@ export const defaultInfoButtonStyles: IButtonStyles = {
 }

 export const defaultEditableDropdownStyles: IEditableDropdownStyles = {
-	contextBackground: asCssVariable(editorBackground),
-	contextBorder: asCssVariable(inputBorder),
+	contextBackground: cr.asCssVariable(cr.editorBackground),
+	contextBorder: cr.asCssVariable(cr.inputBorder),
 	...defaultInputBoxStyles,
 	...defaultListStyles
 }
@@ -51,7 +53,27 @@ export const defaultTableFilterStyles: ITableFilterStyles = {
 }

 export const defaultDropdownStyles: IDropdownStyles = {
-	foregroundColor: asCssVariable(inputForeground),
-	borderColor: asCssVariable(inputBorder),
-	backgroundColor: asCssVariable(editorBackground)
+	foregroundColor: cr.asCssVariable(cr.inputForeground),
+	borderColor: cr.asCssVariable(cr.inputBorder),
+	backgroundColor: cr.asCssVariable(cr.editorBackground)
+}
+
+export const defaultListBoxStyles: IListBoxStyles = {
+	inputValidationInfoBorder: cr.asCssVariable(cr.inputValidationInfoBorder),
+	inputValidationInfoBackground: cr.asCssVariable(cr.inputValidationInfoBackground),
+	inputValidationWarningBorder: cr.asCssVariable(cr.inputValidationWarningBorder),
+	inputValidationWarningBackground: cr.asCssVariable(cr.inputValidationWarningBackground),
+	inputValidationErrorBorder: cr.asCssVariable(cr.inputValidationErrorBorder),
+	inputValidationErrorBackground: cr.asCssVariable(cr.inputValidationErrorBackground),
+	...vsDefaultSelectBoxStyles
+}
+
+export const defaultSelectBoxStyles: ISelectBoxStyles = {
+	inputValidationInfoBorder: cr.asCssVariable(cr.inputValidationInfoBorder),
+	inputValidationInfoBackground: cr.asCssVariable(cr.inputValidationInfoBackground),
+	inputValidationWarningBorder: cr.asCssVariable(cr.inputValidationWarningBorder),
+	inputValidationWarningBackground: cr.asCssVariable(cr.inputValidationWarningBackground),
+	inputValidationErrorBorder: cr.asCssVariable(cr.inputValidationErrorBorder),
+	inputValidationErrorBackground: cr.asCssVariable(cr.inputValidationErrorBackground),
+	...vsDefaultSelectBoxStyles
 }
--- a/src/sql/platform/theme/common/styler.ts
+++ b/src/sql/platform/theme/common/styler.ts
@@ -11,78 +11,6 @@ import * as sqlcr from 'sql/platform/theme/common/colorRegistry';
 import { IThemable, attachStyler, computeStyles, IStyleOverrides } from 'sql/platform/theme/common/vsstyler';
 import { IDisposable } from 'vs/base/common/lifecycle';

-export interface ISelectBoxStyleOverrides extends IStyleOverrides {
-	selectBackground?: cr.ColorIdentifier,
-	selectListBackground?: cr.ColorIdentifier,
-	selectForeground?: cr.ColorIdentifier,
-	selectBorder?: cr.ColorIdentifier,
-	disabledSelectBackground?: cr.ColorIdentifier,
-	disabledSelectForeground?: cr.ColorIdentifier,
-	inputValidationInfoBorder?: cr.ColorIdentifier,
-	inputValidationInfoBackground?: cr.ColorIdentifier,
-	inputValidationWarningBorder?: cr.ColorIdentifier,
-	inputValidationWarningBackground?: cr.ColorIdentifier,
-	inputValidationErrorBorder?: cr.ColorIdentifier,
-	inputValidationErrorBackground?: cr.ColorIdentifier,
-	focusBorder?: cr.ColorIdentifier,
-	listFocusBackground?: cr.ColorIdentifier,
-	listFocusForeground?: cr.ColorIdentifier,
-	listFocusOutline?: cr.ColorIdentifier,
-	listHoverBackground?: cr.ColorIdentifier,
-	listHoverForeground?: cr.ColorIdentifier
-}
-
-export const defaultSelectBoxStyles: ISelectBoxStyleOverrides = {
-	selectBackground: cr.selectBackground,
-	selectListBackground: cr.selectListBackground,
-	selectForeground: cr.selectForeground,
-	selectBorder: cr.selectBorder,
-	disabledSelectBackground: colors.disabledInputBackground,
-	disabledSelectForeground: colors.disabledInputForeground,
-	inputValidationInfoBorder: cr.inputValidationInfoBorder,
-	inputValidationInfoBackground: cr.inputValidationInfoBackground,
-	inputValidationWarningBorder: cr.inputValidationWarningBorder,
-	inputValidationWarningBackground: cr.inputValidationWarningBackground,
-	inputValidationErrorBorder: cr.inputValidationErrorBorder,
-	inputValidationErrorBackground: cr.inputValidationErrorBackground,
-	focusBorder: cr.focusBorder,
-	listFocusBackground: cr.listFocusBackground,
-	listFocusForeground: cr.listFocusForeground,
-	listFocusOutline: cr.activeContrastBorder,
-	listHoverBackground: cr.listHoverBackground,
-	listHoverForeground: cr.listHoverForeground,
-	listHoverOutline: cr.activeContrastBorder
-};
-
-export function attachSelectBoxStyler(widget: IThemable, themeService: IThemeService, style?: ISelectBoxStyleOverrides): IDisposable {
-	return attachStyler(themeService, { ...defaultSelectBoxStyles, ...(style || {}) }, widget);
-}
-
-export function attachListBoxStyler(widget: IThemable, themeService: IThemeService, style?:
-	{
-		selectBackground?: cr.ColorIdentifier,
-		selectForeground?: cr.ColorIdentifier,
-		selectBorder?: cr.ColorIdentifier,
-		inputValidationInfoBorder?: cr.ColorIdentifier,
-		inputValidationInfoBackground?: cr.ColorIdentifier,
-		inputValidationWarningBorder?: cr.ColorIdentifier,
-		inputValidationWarningBackground?: cr.ColorIdentifier,
-		inputValidationErrorBorder?: cr.ColorIdentifier,
-		inputValidationErrorBackground?: cr.ColorIdentifier
-	}): IDisposable {
-	return attachStyler(themeService, {
-		selectBackground: (style && style.selectBackground) || cr.selectBackground,
-		selectForeground: (style && style.selectForeground) || cr.selectForeground,
-		selectBorder: (style && style.selectBorder) || cr.selectBorder,
-		inputValidationInfoBorder: (style && style.inputValidationInfoBorder) || cr.inputValidationInfoBorder,
-		inputValidationInfoBackground: (style && style.inputValidationInfoBackground) || cr.inputValidationInfoBackground,
-		inputValidationWarningBorder: (style && style.inputValidationWarningBorder) || cr.inputValidationWarningBorder,
-		inputValidationWarningBackground: (style && style.inputValidationWarningBackground) || cr.inputValidationWarningBackground,
-		inputValidationErrorBorder: (style && style.inputValidationErrorBorder) || cr.inputValidationErrorBorder,
-		inputValidationErrorBackground: (style && style.inputValidationErrorBackground) || cr.inputValidationErrorBackground
-	}, widget);
-}
-
 export interface ITableStyleOverrides extends IStyleOverrides {
 	listFocusBackground?: cr.ColorIdentifier,
 	listFocusForeground?: cr.ColorIdentifier,
@@ -157,10 +85,8 @@ export interface IInfoButtonStyleOverrides {
 export function attachDesignerStyler(widget: any, themeService: IThemeService): IDisposable {
 	function applyStyles(): void {
 		const colorTheme = themeService.getColorTheme();
-		const selectBoxStyles = computeStyles(colorTheme, defaultSelectBoxStyles);
 		const tableStyles = computeStyles(colorTheme, defaultTableStyles);
 		widget.style({
-			selectBoxStyles: selectBoxStyles,
 			tableStyles: tableStyles,
 			paneSeparator: cr.resolveColorValue(sqlcr.DesignerPaneSeparator, colorTheme),
 			groupHeaderBackground: cr.resolveColorValue(sqlcr.GroupHeaderBackground, colorTheme)
--- a/src/sql/platform/theme/common/vsstyler.ts
+++ b/src/sql/platform/theme/common/vsstyler.ts
@@ -5,8 +5,7 @@

 import { Color } from 'vs/base/common/color';
 import { IDisposable } from 'vs/base/common/lifecycle';
-import { activeContrastBorder, breadcrumbsActiveSelectionForeground, breadcrumbsBackground, breadcrumbsFocusForeground, breadcrumbsForeground, buttonBackground, buttonBorder, buttonForeground, buttonHoverBackground, buttonSecondaryBackground, buttonSecondaryForeground, buttonSecondaryHoverBackground, ColorIdentifier, ColorTransform, ColorValue, contrastBorder, editorWidgetBackground, editorWidgetBorder, editorWidgetForeground, focusBorder, inputActiveOptionBackground, inputActiveOptionBorder, inputActiveOptionForeground, inputBackground, inputBorder, inputForeground, inputValidationErrorBackground, inputValidationErrorBorder, inputValidationErrorForeground, inputValidationInfoBackground, inputValidationInfoBorder, inputValidationInfoForeground, inputValidationWarningBackground, inputValidationWarningBorder, inputValidationWarningForeground, keybindingLabelBackground, keybindingLabelBorder, keybindingLabelBottomBorder, keybindingLabelForeground, listActiveSelectionBackground, listActiveSelectionForeground, listActiveSelectionIconForeground, listDropBackground, listFilterWidgetBackground, listFilterWidgetNoMatchesOutline, listFilterWidgetOutline, listFocusBackground, listFocusForeground, listFocusOutline, listHoverBackground, listHoverForeground, listInactiveFocusBackground, listInactiveFocusOutline, listInactiveSelectionBackground, listInactiveSelectionForeground, listInactiveSelectionIconForeground, menuBackground, menuBorder, menuForeground, menuSelectionBackground, menuSelectionBorder, menuSelectionForeground, menuSeparatorBackground, pickerGroupForeground, problemsErrorIconForeground, problemsInfoIconForeground, problemsWarningIconForeground, progressBarBackground, quickInputListFocusBackground, quickInputListFocusForeground, quickInputListFocusIconForeground, resolveColorValue, scrollbarShadow, scrollbarSliderActiveBackground, scrollbarSliderBackground, scrollbarSliderHoverBackground, selectBackground, selectBorder, selectForeground, selectListBackground, checkboxBackground, checkboxBorder, checkboxForeground, tableColumnsBorder, tableOddRowsBackgroundColor, textLinkForeground, treeIndentGuidesStroke, widgetShadow, listFocusAndSelectionOutline, listFilterWidgetShadow, buttonSeparator } from 'vs/platform/theme/common/colorRegistry'; // {{SQL CARBON EDIT}} Added buttonSecondaryBorder, buttonDisabledBorder, buttonDisabledBackground, buttonDisabledForeground to import list
-import { isHighContrast } from 'vs/platform/theme/common/theme';
+import { activeContrastBorder, breadcrumbsActiveSelectionForeground, breadcrumbsBackground, breadcrumbsFocusForeground, breadcrumbsForeground, buttonBackground, buttonBorder, buttonForeground, buttonHoverBackground, buttonSecondaryBackground, buttonSecondaryForeground, buttonSecondaryHoverBackground, ColorIdentifier, ColorTransform, ColorValue, contrastBorder, editorWidgetBackground, editorWidgetForeground, inputActiveOptionBackground, inputActiveOptionBorder, inputActiveOptionForeground, inputBackground, inputBorder, inputForeground, inputValidationErrorBackground, inputValidationErrorBorder, inputValidationErrorForeground, inputValidationInfoBackground, inputValidationInfoBorder, inputValidationInfoForeground, inputValidationWarningBackground, inputValidationWarningBorder, inputValidationWarningForeground, keybindingLabelBackground, keybindingLabelBorder, keybindingLabelBottomBorder, keybindingLabelForeground, listActiveSelectionBackground, listActiveSelectionForeground, listActiveSelectionIconForeground, listDropBackground, listFilterWidgetBackground, listFilterWidgetNoMatchesOutline, listFilterWidgetOutline, listFocusBackground, listFocusForeground, listFocusOutline, listHoverBackground, listHoverForeground, listInactiveFocusBackground, listInactiveFocusOutline, listInactiveSelectionBackground, listInactiveSelectionForeground, listInactiveSelectionIconForeground, menuBackground, menuBorder, menuForeground, menuSelectionBackground, menuSelectionBorder, menuSelectionForeground, menuSeparatorBackground, problemsErrorIconForeground, problemsInfoIconForeground, problemsWarningIconForeground, progressBarBackground, resolveColorValue, scrollbarShadow, scrollbarSliderActiveBackground, scrollbarSliderBackground, scrollbarSliderHoverBackground, checkboxBackground, checkboxBorder, checkboxForeground, tableColumnsBorder, tableOddRowsBackgroundColor, textLinkForeground, treeIndentGuidesStroke, widgetShadow, listFocusAndSelectionOutline, listFilterWidgetShadow, buttonSeparator } from 'vs/platform/theme/common/colorRegistry'; // {{SQL CARBON EDIT}} Added buttonSecondaryBorder, buttonDisabledBorder, buttonDisabledBackground, buttonDisabledForeground to import list
 import { IColorTheme, IThemeService } from 'vs/platform/theme/common/themeService';

 //export type styleFn = (colors: { [name: string]: Color | undefined }) => void;
@@ -60,34 +59,6 @@ export function attachStyler<T extends IColorMapping>(themeService: IThemeServic
 	return themeService.onDidColorThemeChange(applyStyles);
 }

-export interface ISelectBoxStyleOverrides extends IStyleOverrides, IListStyleOverrides {
-	selectBackground?: ColorIdentifier;
-	selectListBackground?: ColorIdentifier;
-	selectForeground?: ColorIdentifier;
-	decoratorRightForeground?: ColorIdentifier;
-	selectBorder?: ColorIdentifier;
-	focusBorder?: ColorIdentifier;
-}
-
-export function attachSelectBoxStyler(widget: IThemable, themeService: IThemeService, style?: ISelectBoxStyleOverrides): IDisposable {
-	return attachStyler(themeService, {
-		selectBackground: style?.selectBackground || selectBackground,
-		selectListBackground: style?.selectListBackground || selectListBackground,
-		selectForeground: style?.selectForeground || selectForeground,
-		decoratorRightForeground: style?.pickerGroupForeground || pickerGroupForeground,
-		selectBorder: style?.selectBorder || selectBorder,
-		focusBorder: style?.focusBorder || focusBorder,
-		listFocusBackground: style?.listFocusBackground || quickInputListFocusBackground,
-		listInactiveSelectionIconForeground: style?.listInactiveSelectionIconForeground || quickInputListFocusIconForeground,
-		listFocusForeground: style?.listFocusForeground || quickInputListFocusForeground,
-		listFocusOutline: style?.listFocusOutline || ((theme: IColorTheme) => isHighContrast(theme.type) ? activeContrastBorder : Color.transparent),
-		listHoverBackground: style?.listHoverBackground || listHoverBackground,
-		listHoverForeground: style?.listHoverForeground || listHoverForeground,
-		listHoverOutline: style?.listFocusOutline || activeContrastBorder,
-		selectListBorder: style?.selectListBorder || editorWidgetBorder
-	} as ISelectBoxStyleOverrides, widget);
-}
-
 export interface IListStyleOverrides extends IStyleOverrides {
 	listBackground?: ColorIdentifier;
 	listFocusBackground?: ColorIdentifier;
--- a/src/sql/workbench/browser/designer/designer.ts
+++ b/src/sql/workbench/browser/designer/designer.ts
@@ -19,7 +19,7 @@ import 'vs/css!./media/designer';
 import { ITableStyles } from 'sql/base/browser/ui/table/interfaces';
 import { Checkbox } from 'sql/base/browser/ui/checkbox/checkbox';
 import { Table } from 'sql/base/browser/ui/table/table';
-import { ISelectBoxStyles, SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
+import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
 import { TableDataView } from 'sql/base/browser/ui/table/tableDataView';
 import { localize } from 'vs/nls';
 import { TableCellEditorFactory } from 'sql/base/browser/ui/table/tableCellEditorFactory';
@@ -53,14 +53,13 @@ import { onUnexpectedError } from 'vs/base/common/errors';
 import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
 import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
 import { IComponentContextService } from 'sql/workbench/services/componentContext/browser/componentContextService';
-import { defaultInputBoxStyles, defaultSelectBoxStyles } from 'vs/platform/theme/browser/defaultStyles';
+import { defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles';
 import { ThemeIcon } from 'vs/base/common/themables';
-import { defaultCheckboxStyles, defaultEditableDropdownStyles } from 'sql/platform/theme/browser/defaultStyles';
+import { defaultCheckboxStyles, defaultEditableDropdownStyles, defaultSelectBoxStyles } from 'sql/platform/theme/browser/defaultStyles';

 export interface IDesignerStyle {
 	tabbedPanelStyles?: ITabbedPanelStyles;
 	tableStyles?: ITableStyles;
-	selectBoxStyles?: ISelectBoxStyles;
 	paneSeparator?: Color;
 	groupHeaderBackground?: Color;
 }
@@ -222,7 +221,6 @@ export class Designer extends Disposable {
 			component.style(this._styles.tableStyles);
 		} else if (component instanceof Dropdown) {
 		} else {
-			component.style(this._styles.selectBoxStyles);
 		}
 	}

@@ -800,7 +798,7 @@ export class Designer extends Disposable {
 						}
 					});
 				} else {
-					dropdown = new SelectBox(dropdownProperties.values as string[] || [], undefined, this._contextViewProvider, undefined, {
+					dropdown = new SelectBox(dropdownProperties.values as string[] || [], undefined, defaultSelectBoxStyles, this._contextViewProvider, undefined, {
 						ariaLabel: componentDefinition.componentProperties?.title,
 						ariaDescription: componentDefinition.description
 					});
--- a/src/sql/workbench/browser/modal/optionsDialogHelper.ts
+++ b/src/sql/workbench/browser/modal/optionsDialogHelper.ts
@@ -13,6 +13,7 @@ import * as azdata from 'azdata';
 import { localize } from 'vs/nls';
 import { ServiceOptionType } from 'sql/platform/connection/common/interfaces';
 import { defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles';
+import { defaultSelectBoxStyles } from 'sql/platform/theme/browser/defaultStyles';

 export interface IOptionElement {
 	optionWidget: any;
@@ -49,7 +50,7 @@ export function createOptionElement(option: azdata.ServiceOption, rowContainer:
 		optionWidget.value = optionValue;
 		inputElement = findElement(rowContainer, 'input');
 	} else if (option.valueType === ServiceOptionType.category || option.valueType === ServiceOptionType.boolean) {
-		optionWidget = new SelectBox(possibleInputs, optionValue.toString(), contextViewService, undefined, { ariaLabel: option.displayName }, option.name);
+		optionWidget = new SelectBox(possibleInputs, optionValue.toString(), defaultSelectBoxStyles, contextViewService, undefined, { ariaLabel: option.displayName }, option.name);
 		DialogHelper.appendInputSelectBox(rowContainer, optionWidget);
 		inputElement = findElement(rowContainer, 'monaco-select-box');
 	} else if (option.valueType === ServiceOptionType.string || option.valueType === ServiceOptionType.password) {
--- a/src/sql/workbench/browser/modelComponents/dropdown.component.ts
+++ b/src/sql/workbench/browser/modelComponents/dropdown.component.ts
@@ -13,9 +13,6 @@ import * as azdata from 'azdata';

 import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBase';
 import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
-import { attachSelectBoxStyler } from 'sql/platform/theme/common/vsstyler';
-
-import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
 import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/platform/dashboard/browser/interfaces';
@@ -25,7 +22,7 @@ import { ILogService } from 'vs/platform/log/common/log';
 import { registerThemingParticipant, IColorTheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService';
 import { errorForeground, inputValidationErrorBorder } from 'vs/platform/theme/common/colorRegistry';
 import { Dropdown, IDropdownOptions } from 'sql/base/browser/ui/editableDropdown/browser/dropdown';
-import { defaultEditableDropdownStyles } from 'sql/platform/theme/browser/defaultStyles';
+import { defaultEditableDropdownStyles, defaultSelectBoxStyles } from 'sql/platform/theme/browser/defaultStyles';

@Component({
 	selector: 'modelview-dropdown',
@@ -68,7 +65,6 @@ export default class DropDownComponent extends ComponentBase<azdata.DropDownProp
 	@ViewChild('loadingBox', { read: ElementRef }) private _loadingBoxContainer: ElementRef;
 	constructor(
 		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
-		@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService,
 		@Inject(IContextViewService) private contextViewService: IContextViewService,
 		@Inject(forwardRef(() => ElementRef)) el: ElementRef,
 		@Inject(IConfigurationService) private readonly configurationService: IConfigurationService,
@@ -107,10 +103,9 @@ export default class DropDownComponent extends ComponentBase<azdata.DropDownProp
 			this._validations.push(() => !this.required || !this.editable || !!this._editableDropdown.value);
 		}
 		if (this._dropDownContainer) {
-			this._selectBox = new SelectBox(this.getValues(), this.getSelectedValue(), this.contextViewService, this._dropDownContainer.nativeElement);
+			this._selectBox = new SelectBox(this.getValues(), this.getSelectedValue(), defaultSelectBoxStyles, this.contextViewService, this._dropDownContainer.nativeElement);
 			this._selectBox.render(this._dropDownContainer.nativeElement);
 			this._register(this._selectBox);
-			this._register(attachSelectBoxStyler(this._selectBox, this.themeService));
 			this._register(this._selectBox.onDidSelect(async e => {
 				// also update the selected value here while in accessibility mode since the read-only selectbox
 				// is used even if the editable flag is true
@@ -203,10 +198,9 @@ export default class DropDownComponent extends ComponentBase<azdata.DropDownProp
 		if (this.loading) {
 			// Lazily create the select box for the loading portion since many dropdowns won't use it
 			if (!this._loadingBox) {
-				this._loadingBox = new SelectBox([this.getStatusText()], this.getStatusText(), this.contextViewService, this._loadingBoxContainer.nativeElement);
+				this._loadingBox = new SelectBox([this.getStatusText()], this.getStatusText(), defaultSelectBoxStyles, this.contextViewService, this._loadingBoxContainer.nativeElement);
 				this._loadingBox.render(this._loadingBoxContainer.nativeElement);
 				this._register(this._loadingBox);
-				this._register(attachSelectBoxStyler(this._loadingBox, this.themeService));
 				this._loadingBoxContainer.nativeElement.className = ''; // Removing the dropdown arrow icon from the right
 			}
 			if (this.ariaLabel !== '') {
--- a/src/sql/workbench/browser/modelComponents/listbox.component.ts
+++ b/src/sql/workbench/browser/modelComponents/listbox.component.ts
@@ -13,13 +13,12 @@ import * as azdata from 'azdata';
 import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBase';

 import { ListBox } from 'sql/base/browser/ui/listBox/listBox';
-import { attachListBoxStyler } from 'sql/platform/theme/common/styler';
-import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService';
 import { KeyCode } from 'vs/base/common/keyCodes';
 import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/platform/dashboard/browser/interfaces';
 import { ILogService } from 'vs/platform/log/common/log';
+import { defaultListBoxStyles } from 'sql/platform/theme/browser/defaultStyles';

@Component({
 	selector: 'modelview-listBox',
@@ -35,7 +34,6 @@ export default class ListBoxComponent extends ComponentBase<azdata.ListBoxProper
 	@ViewChild('input', { read: ElementRef }) private _inputContainer: ElementRef;
 	constructor(
 		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
-		@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService,
 		@Inject(IContextViewService) private contextViewService: IContextViewService,
 		@Inject(IClipboardService) private clipboardService: IClipboardService,
 		@Inject(forwardRef(() => ElementRef)) el: ElementRef,
@@ -46,7 +44,10 @@ export default class ListBoxComponent extends ComponentBase<azdata.ListBoxProper

 	ngAfterViewInit(): void {
 		if (this._inputContainer) {
-			this._input = new ListBox([], this.contextViewService);
+			this._input = new ListBox({
+				items: [],
+				...defaultListBoxStyles
+			}, this.contextViewService);
 			this._input.onKeyDown(e => {
 				if (this._input.selectedOptions.length > 0) {
 					const key = e.keyCode;
@@ -68,7 +69,6 @@ export default class ListBoxComponent extends ComponentBase<azdata.ListBoxProper
 			this._input.render(this._inputContainer.nativeElement);

 			this._register(this._input);
-			this._register(attachListBoxStyler(this._input, this.themeService));
 			this._register(this._input.onDidSelect(e => {
 				this.selectedRow = e.index;
 				this.fireEvent({
--- a/src/sql/workbench/contrib/backup/browser/backup.component.ts
+++ b/src/sql/workbench/contrib/backup/browser/backup.component.ts
@@ -11,7 +11,6 @@ import { Checkbox } from 'sql/base/browser/ui/checkbox/checkbox';
 import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox';
 import { ListBox } from 'sql/base/browser/ui/listBox/listBox';
 import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
-import { attachListBoxStyler, attachSelectBoxStyler } from 'sql/platform/theme/common/styler';
 import { IConnectionProfile } from 'sql/platform/connection/common/interfaces';
 import * as BackupConstants from 'sql/workbench/contrib/backup/common/constants';
 import { IBackupService, TaskExecutionMode } from 'sql/platform/backup/common/backupService';
@@ -38,7 +37,7 @@ import { IColorTheme } from 'vs/platform/theme/common/themeService';
 import { DatabaseEngineEdition } from 'sql/workbench/api/common/sqlExtHostTypes';
 import { IBackupRestoreUrlBrowserDialogService } from 'sql/workbench/services/backupRestoreUrlBrowser/common/urlBrowserDialogService';
 import { defaultButtonStyles, defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles';
-import { defaultCheckboxStyles } from 'sql/platform/theme/browser/defaultStyles';
+import { defaultCheckboxStyles, defaultListBoxStyles, defaultSelectBoxStyles } from 'sql/platform/theme/browser/defaultStyles';

 export const BACKUP_SELECTOR: string = 'backup-component';

@@ -241,7 +240,7 @@ export class BackupComponent extends AngularDisposable {
 			inputBoxStyles: defaultInputBoxStyles
 		}));
 		// Set backup type
-		this.backupTypeSelectBox = this._register(new SelectBox([], '', this.contextViewService, undefined, { ariaLabel: this.localizedStrings.BACKUP_TYPE }));
+		this.backupTypeSelectBox = this._register(new SelectBox([], '', defaultSelectBoxStyles, this.contextViewService, undefined, { ariaLabel: this.localizedStrings.BACKUP_TYPE }));
 		this.backupTypeSelectBox.render(this.backupTypeElement!.nativeElement);

 		// Set copy-only check box
@@ -311,7 +310,10 @@ export class BackupComponent extends AngularDisposable {
 		}));
 		this._register(this.urlInputBox.onDidChange((value) => this.onUrlInputBoxChanged(value)));

-		this.pathListBox = this._register(new ListBox([], this.contextViewService));
+		this.pathListBox = this._register(new ListBox({
+			items: [],
+			...defaultListBoxStyles
+		}, this.contextViewService));
 		this.pathListBox.setAriaLabel(LocalizedStrings.BACKUP_DEVICE);
 		this._register(this.pathListBox.onKeyDown(e => {
 			if (this.pathListBox!.selectedOptions.length > 0) {
@@ -345,13 +347,13 @@ export class BackupComponent extends AngularDisposable {
 		this.removeFilePathButton.title = localize('removeFile', "Remove files");

 		// Set compression
-		this.compressionSelectBox = this._register(new SelectBox(this.compressionOptions, this.compressionOptions[0], this.contextViewService, undefined, { ariaLabel: this.localizedStrings.SET_BACKUP_COMPRESSION }));
+		this.compressionSelectBox = this._register(new SelectBox(this.compressionOptions, this.compressionOptions[0], defaultSelectBoxStyles, this.contextViewService, undefined, { ariaLabel: this.localizedStrings.SET_BACKUP_COMPRESSION }));
 		this.compressionSelectBox.render(this.compressionElement!.nativeElement);

 		// Set encryption
-		this.algorithmSelectBox = this._register(new SelectBox(this.encryptionAlgorithms, this.encryptionAlgorithms[0], this.contextViewService, undefined, { ariaLabel: this.localizedStrings.ALGORITHM }));
+		this.algorithmSelectBox = this._register(new SelectBox(this.encryptionAlgorithms, this.encryptionAlgorithms[0], defaultSelectBoxStyles, this.contextViewService, undefined, { ariaLabel: this.localizedStrings.ALGORITHM }));
 		this.algorithmSelectBox.render(this.encryptionAlgorithmElement!.nativeElement);
-		this.encryptorSelectBox = this._register(new SelectBox([], '', this.contextViewService, undefined, { ariaLabel: this.localizedStrings.CERTIFICATE_OR_ASYMMETRIC_KEY }));
+		this.encryptorSelectBox = this._register(new SelectBox([], '', defaultSelectBoxStyles, this.contextViewService, undefined, { ariaLabel: this.localizedStrings.CERTIFICATE_OR_ASYMMETRIC_KEY }));
 		this.encryptorSelectBox.render(this.encryptorElement!.nativeElement);

 		// Set media
@@ -605,13 +607,6 @@ export class BackupComponent extends AngularDisposable {
 	}

 	private registerListeners(): void {
-		// Theme styler
-		this._register(attachSelectBoxStyler(this.backupTypeSelectBox!, this.themeService));
-		this._register(attachListBoxStyler(this.pathListBox!, this.themeService));
-		this._register(attachSelectBoxStyler(this.compressionSelectBox!, this.themeService));
-		this._register(attachSelectBoxStyler(this.algorithmSelectBox!, this.themeService));
-		this._register(attachSelectBoxStyler(this.encryptorSelectBox!, this.themeService));
-
 		this._register(this.backupTypeSelectBox!.onDidSelect(selected => this.onBackupTypeChanged()));
 		this._register(this.addUrlPathButton!.onDidClick(() => this.onAddUrlClick()));
 		this._register(this.addFilePathButton!.onDidClick(() => this.onAddFileClick()));
--- a/src/sql/workbench/contrib/charts/browser/chartView.ts
+++ b/src/sql/workbench/contrib/charts/browser/chartView.ts
@@ -25,11 +25,10 @@ import { IContextViewService } from 'vs/platform/contextview/browser/contextView
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { INotificationService } from 'vs/platform/notification/common/notification';
 import { Registry } from 'vs/platform/registry/common/platform';
-import { attachSelectBoxStyler } from 'sql/platform/theme/common/vsstyler';
-import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { ChartOptions, ControlType, IChartOption } from './chartOptions';
 import { Insight } from './insight';
 import { defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles';
+import { defaultSelectBoxStyles } from 'sql/platform/theme/browser/defaultStyles';


 const insightRegistry = Registry.as<IInsightRegistry>(Extensions.InsightContribution);
@@ -89,7 +88,6 @@ export class ChartView extends Disposable implements IPanelView {
 	constructor(
 		private readonly _isQueryEditorChart: boolean,
 		@IContextViewService private _contextViewService: IContextViewService,
-		@IThemeService private _themeService: IThemeService,
 		@IInstantiationService private _instantiationService: IInstantiationService,
 		@INotificationService private readonly _notificationService: INotificationService,
 		@IConfigurationService private readonly _configurationService: IConfigurationService
@@ -347,7 +345,7 @@ export class ChartView extends Disposable implements IPanelView {
 				break;
 			case ControlType.combo:
 				//pass options into changeAltNames in order for SelectBox to show user-friendly names.
-				let dropdown = new SelectBox(option.displayableOptions || this.changeToAltNames(option.options!), undefined!, this._contextViewService);
+				let dropdown = new SelectBox(option.displayableOptions || this.changeToAltNames(option.options!), undefined!, defaultSelectBoxStyles, this._contextViewService);
 				dropdown.setAriaLabel(option.label);
 				dropdown.select(option.options!.indexOf(value));
 				dropdown.render(optionInput);
@@ -364,7 +362,6 @@ export class ChartView extends Disposable implements IPanelView {
 						dropdown.select(option.options!.indexOf(val));
 					}
 				};
-				this.optionDisposables.push(attachSelectBoxStyler(dropdown, this._themeService));
 				break;
 			case ControlType.input:
 				let input = new InputBox(optionInput, this._contextViewService, {
--- a/src/sql/workbench/contrib/charts/test/browser/chartView.test.ts
+++ b/src/sql/workbench/contrib/charts/test/browser/chartView.test.ts
@@ -43,5 +43,5 @@ function createChartView(isQueryEditorChart: boolean): ChartView {
 	const notificationService = new TestNotificationService();
 	const configurationService = new TestConfigurationService();
 	instantiationService.stub(IThemeService, themeService);
-	return new ChartView(isQueryEditorChart, contextViewService, themeService, instantiationService, notificationService, configurationService);
+	return new ChartView(isQueryEditorChart, contextViewService, instantiationService, notificationService, configurationService);
 }
--- a/src/sql/workbench/contrib/editData/browser/editDataActions.ts
+++ b/src/sql/workbench/contrib/editData/browser/editDataActions.ts
@@ -14,9 +14,8 @@ import * as dom from 'vs/base/browser/dom';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import { INotificationService } from 'vs/platform/notification/common/notification';
 import Severity from 'vs/base/common/severity';
-import { attachSelectBoxStyler } from 'sql/platform/theme/common/vsstyler';
-import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { IActionViewItem } from 'vs/base/browser/ui/actionbar/actionbar';
+import { defaultSelectBoxStyles } from 'sql/platform/theme/browser/defaultStyles';
 const $ = dom.$;

 /**
@@ -158,17 +157,14 @@ export class ChangeMaxRowsActionItem extends Disposable implements IActionViewIt
 	constructor(
 		private _editor: EditDataEditor,
 		public action: IAction,
-		@IContextViewService contextViewService: IContextViewService,
-		@IThemeService private _themeService: IThemeService) {
+		@IContextViewService contextViewService: IContextViewService) {
 		super();
 		this._options = ['200', '1000', '10000'];
 		this._currentOptionsIndex = 0;
-		this.selectBox = new SelectBox(this._options, this._options[this._currentOptionsIndex], contextViewService);
+		this.selectBox = new SelectBox(this._options, this._options[this._currentOptionsIndex], defaultSelectBoxStyles, contextViewService);
 		this._registerListeners();
 		this._refreshOptions();
 		this.defaultRowCount = Number(this._options[this._currentOptionsIndex]);
-
-		this._register(attachSelectBoxStyler(this.selectBox, _themeService));
 	}

 	public render(container: HTMLElement): void {
@@ -213,7 +209,6 @@ export class ChangeMaxRowsActionItem extends Disposable implements IActionViewIt
 			this._currentOptionsIndex = this._options.findIndex(x => x === selection.selected);
 			this._editor.editDataInput.onRowDropDownSet(Number(selection.selected));
 		}));
-		this._register(attachSelectBoxStyler(this.selectBox, this._themeService));
 	}
 }

--- a/src/sql/workbench/contrib/executionPlan/browser/executionPlanComparisonEditorView.ts
+++ b/src/sql/workbench/contrib/executionPlan/browser/executionPlanComparisonEditorView.ts
@@ -15,7 +15,7 @@ import { Action } from 'vs/base/common/actions';
 import { IContextMenuService, IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import { IFileDialogService } from 'vs/platform/dialogs/common/dialogs';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
-import { IColorTheme, ICssStyleCollector, IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
+import { IColorTheme, ICssStyleCollector, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
 import * as DOM from 'vs/base/browser/dom';
 import { ActionsOrientation } from 'vs/base/browser/ui/actionbar/actionbar';
 import { localize } from 'vs/nls';
@@ -26,7 +26,6 @@ import { INotificationService } from 'vs/platform/notification/common/notificati
 import { LoadingSpinner } from 'sql/base/browser/ui/loadingSpinner/loadingSpinner';
 import { contrastBorder, editorWidgetBackground, errorForeground, listHoverBackground, textLinkForeground, widgetShadow } from 'vs/platform/theme/common/colorRegistry';
 import { ExecutionPlanViewHeader } from 'sql/workbench/contrib/executionPlan/browser/executionPlanViewHeader';
-import { attachSelectBoxStyler } from 'sql/platform/theme/common/styler';
 import { IProgressService, ProgressLocation } from 'vs/platform/progress/common/progress';
 import { generateUuid } from 'vs/base/common/uuid';
 import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry';
@@ -35,6 +34,7 @@ import { NodeSearchWidget } from 'sql/workbench/contrib/executionPlan/browser/wi
 import { Button } from 'sql/base/browser/ui/button/button';
 import { Disposable } from 'vs/base/common/lifecycle';
 import { defaultButtonStyles } from 'vs/platform/theme/browser/defaultStyles';
+import { defaultSelectBoxStyles } from 'sql/platform/theme/browser/defaultStyles';

 const ADD_EXECUTION_PLAN_STRING = localize('epCompare.addExecutionPlanLabel', 'Add execution plan');

@@ -126,7 +126,6 @@ export class ExecutionPlanComparisonEditorView extends Disposable {
 	constructor(
 		parentContainer: HTMLElement,
 		@IInstantiationService private readonly _instantiationService: IInstantiationService,
-		@IThemeService private themeService: IThemeService,
 		@IExecutionPlanService private _executionPlanService: IExecutionPlanService,
 		@IFileDialogService private _fileDialogService: IFileDialogService,
 		@IContextViewService readonly contextViewService: IContextViewService,
@@ -235,7 +234,7 @@ export class ExecutionPlanComparisonEditorView extends Disposable {
 		this._topPlanContainer = DOM.$('.plan-container');
 		this.planSplitViewContainer.appendChild(this._topPlanContainer);
 		this._topPlanDropdownContainer = DOM.$('.dropdown-container');
-		this._topPlanDropdown = this._register(new SelectBox(['option 1', 'option2'], 'option1', this.contextViewService, this._topPlanDropdownContainer));
+		this._topPlanDropdown = this._register(new SelectBox(['option 1', 'option2'], 'option1', defaultSelectBoxStyles, this.contextViewService, this._topPlanDropdownContainer));
 		this._topPlanDropdown.render(this._topPlanDropdownContainer);

 		this._register(this._topPlanDropdown.onDidSelect(async (e) => {
@@ -253,7 +252,7 @@ export class ExecutionPlanComparisonEditorView extends Disposable {
 			await this.getSkeletonNodes();
 		}));

-		this._register(attachSelectBoxStyler(this._topPlanDropdown, this.themeService));
+
 		this._topPlanContainer.appendChild(this._topPlanDropdownContainer);
 		this._topPlanRecommendations = this._register(this._instantiationService.createInstance(ExecutionPlanViewHeader, this._topPlanContainer, undefined));

@@ -262,7 +261,7 @@ export class ExecutionPlanComparisonEditorView extends Disposable {
 		this._bottomPlanContainer = DOM.$('.plan-container');
 		this.planSplitViewContainer.appendChild(this._bottomPlanContainer);
 		this._bottomPlanDropdownContainer = DOM.$('.dropdown-container');
-		this._bottomPlanDropdown = this._register(new SelectBox(['option 1', 'option2'], 'option1', this.contextViewService, this._bottomPlanDropdownContainer));
+		this._bottomPlanDropdown = this._register(new SelectBox(['option 1', 'option2'], 'option1', defaultSelectBoxStyles, this.contextViewService, this._bottomPlanDropdownContainer));
 		this._bottomPlanDropdown.render(this._bottomPlanDropdownContainer);

 		this._register(this._bottomPlanDropdown.onDidSelect(async (e) => {
@@ -280,8 +279,6 @@ export class ExecutionPlanComparisonEditorView extends Disposable {
 			await this.getSkeletonNodes();
 		}));

-		this._register(attachSelectBoxStyler(this._bottomPlanDropdown, this.themeService));
-
 		this._bottomPlanContainer.appendChild(this._bottomPlanDropdownContainer);
 		this._bottomPlanRecommendations = this._register(this._instantiationService.createInstance(ExecutionPlanViewHeader, this._bottomPlanContainer, undefined));
 	}
--- a/src/sql/workbench/contrib/executionPlan/browser/widgets/highlightExpensiveNodeWidget.ts
+++ b/src/sql/workbench/contrib/executionPlan/browser/widgets/highlightExpensiveNodeWidget.ts
@@ -10,7 +10,6 @@ import { localize } from 'vs/nls';
 import * as errors from 'vs/base/common/errors';
 import { Codicon } from 'vs/base/common/codicons';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
-import { attachSelectBoxStyler } from 'sql/platform/theme/common/styler';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { Action } from 'vs/base/common/actions';
 import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
@@ -23,6 +22,7 @@ import { IConfigurationService } from 'vs/platform/configuration/common/configur
 import { IStorageService, StorageScope, StorageTarget } from 'vs/platform/storage/common/storage';
 import { ThemeIcon } from 'vs/base/common/themables';
 import { defaultButtonStyles } from 'vs/platform/theme/browser/defaultStyles';
+import { defaultSelectBoxStyles } from 'sql/platform/theme/browser/defaultStyles';

 const SELECT_EXPENSE_METRIC_TITLE = localize('executionPlanSelectExpenseMetricTitle', 'Select expense metric');

@@ -86,11 +86,10 @@ export class HighlightExpensiveOperationWidget extends ExecutionPlanWidgetBase {
 		this.container.appendChild(this._expenseMetricSelectBoxContainer);

 		const selectBoxOptions = this.getSelectBoxOptionsFromExecutionPlanDiagram();
-		this.expenseMetricSelectBox = this._register(new SelectBox(selectBoxOptions, COST_STRING, this.contextViewService, this._expenseMetricSelectBoxContainer));
+		this.expenseMetricSelectBox = this._register(new SelectBox(selectBoxOptions, COST_STRING, defaultSelectBoxStyles, this.contextViewService, this._expenseMetricSelectBoxContainer));
 		this.expenseMetricSelectBox.setAriaLabel(SELECT_EXPENSE_METRIC_TITLE);

 		this.expenseMetricSelectBox.render(this._expenseMetricSelectBoxContainer);
-		this._register(attachSelectBoxStyler(this.expenseMetricSelectBox, this.themeService));

 		this._expenseMetricSelectBoxContainer.style.width = '200px';
 		this._expenseMetricSelectBoxContainer.style.marginRight = '5px';
--- a/src/sql/workbench/contrib/executionPlan/browser/widgets/nodeSearchWidget.ts
+++ b/src/sql/workbench/contrib/executionPlan/browser/widgets/nodeSearchWidget.ts
@@ -10,7 +10,6 @@ import * as DOM from 'vs/base/browser/dom';
 import { localize } from 'vs/nls';
 import { Codicon } from 'vs/base/common/codicons';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
-import { attachSelectBoxStyler } from 'sql/platform/theme/common/styler';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { Action } from 'vs/base/common/actions';
 import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
@@ -19,6 +18,7 @@ import { AzdataGraphView, SearchType } from 'sql/workbench/contrib/executionPlan
 import { ExecutionPlanWidgetController } from 'sql/workbench/contrib/executionPlan/browser/executionPlanWidgetController';
 import { defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles';
 import { ThemeIcon } from 'vs/base/common/themables';
+import { defaultSelectBoxStyles } from 'sql/platform/theme/browser/defaultStyles';

 const SELECT_PROPERTY_TITLE = localize('executionPlanSelectPropertyTitle', 'Select property');
 const SELECT_SEARCH_TYPE_TITLE = localize('executionPlanSelectSearchTypeTitle', 'Select search type');
@@ -71,9 +71,8 @@ export class NodeSearchWidget extends ExecutionPlanWidgetBase {
 		this._propertyNameSelectBoxContainer.style.width = '120px';

 		const propDropdownOptions = this._executionPlanDiagram.getUniqueElementProperties();
-		this._propertyNameSelectBox = this._register(new SelectBox(propDropdownOptions, propDropdownOptions[0], this.contextViewService, this._propertyNameSelectBoxContainer));
+		this._propertyNameSelectBox = this._register(new SelectBox(propDropdownOptions, propDropdownOptions[0], defaultSelectBoxStyles, this.contextViewService, this._propertyNameSelectBoxContainer));
 		this._propertyNameSelectBox.setAriaLabel(SELECT_PROPERTY_TITLE);
-		this._register(attachSelectBoxStyler(this._propertyNameSelectBox, this.themeService));
 		this._propertyNameSelectBox.render(this._propertyNameSelectBoxContainer);

 		this._register(this._propertyNameSelectBox.onDidSelect(e => {
@@ -93,10 +92,9 @@ export class NodeSearchWidget extends ExecutionPlanWidgetBase {
 			GREATER_EQUAL_DISPLAY_STRING,
 			LESSER_EQUAL_DISPLAY_STRING,
 			LESSER_AND_GREATER_DISPLAY_STRING
-		], EQUALS_DISPLAY_STRING, this.contextViewService, this._searchTypeSelectBoxContainer));
+		], EQUALS_DISPLAY_STRING, defaultSelectBoxStyles, this.contextViewService, this._searchTypeSelectBoxContainer));
 		this._searchTypeSelectBox.setAriaLabel(SELECT_SEARCH_TYPE_TITLE);
 		this._searchTypeSelectBox.render(this._searchTypeSelectBoxContainer);
-		this._register(attachSelectBoxStyler(this._searchTypeSelectBox, this.themeService));

 		this._register(this._searchTypeSelectBox.onDidSelect(e => {
 			this._usePreviousSearchResult = false;
--- a/src/sql/workbench/contrib/notebook/browser/notebook.component.ts
+++ b/src/sql/workbench/contrib/notebook/browser/notebook.component.ts
@@ -13,7 +13,6 @@ import { localize } from 'vs/nls';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { IContextMenuService, IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import { IEditorService } from 'vs/workbench/services/editor/common/editorService';
-import { attachSelectBoxStyler } from 'sql/platform/theme/common/vsstyler';
 import { MenuId, IMenuService, MenuItemAction } from 'vs/platform/actions/common/actions';
 import { IAction, Action, SubmenuAction } from 'vs/base/common/actions';
 import { IContextKeyService, RawContextKey } from 'vs/platform/contextkey/common/contextkey';
@@ -508,13 +507,11 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe
 		let kernelContainer = document.createElement('li');
 		let kernelDropdown = this.instantiationService.createInstance(KernelsDropdown, kernelContainer, this.contextViewService, this.modelReady);
 		kernelDropdown.render(kernelContainer);
-		attachSelectBoxStyler(kernelDropdown, this.themeService);

 		let attachToContainer = document.createElement('li');
 		let attachToDropdown = new AttachToDropdown(attachToContainer, this.contextViewService, this.modelReady,
 			this.connectionManagementService, this.connectionDialogService, this.notificationService, this.capabilitiesService, this._configurationService);
 		attachToDropdown.render(attachToContainer);
-		attachSelectBoxStyler(attachToDropdown, this.themeService);

 		let spacerElement = document.createElement('li');
 		spacerElement.style.marginLeft = 'auto';
--- a/src/sql/workbench/contrib/notebook/browser/notebookActions.ts
+++ b/src/sql/workbench/contrib/notebook/browser/notebookActions.ts
@@ -44,6 +44,7 @@ import { IConnectionProfile } from 'sql/platform/connection/common/interfaces';
 import { Action2 } from 'vs/platform/actions/common/actions';
 import { KeybindingWeight } from 'vs/platform/keybinding/common/keybindingsRegistry';
 import { KeyCode, KeyMod } from 'vs/base/common/keyCodes';
+import { defaultSelectBoxStyles } from 'sql/platform/theme/browser/defaultStyles';

 const msgLoading = localize('loading', "Loading kernels...");
 export const msgChanging = localize('changing', "Changing kernel...");
@@ -600,7 +601,7 @@ export class KernelsDropdown extends SelectBox {
 	private _showAllKernels: boolean = false;
 	constructor(container: HTMLElement, contextViewProvider: IContextViewProvider, modelReady: Promise<INotebookModel>, @IConfigurationService private _configurationService: IConfigurationService,
 	) {
-		super([msgLoading], msgLoading, contextViewProvider, container, { labelText: kernelLabel, labelOnTop: false, ariaLabel: kernelLabel, id: kernelDropdownElementId } as ISelectBoxOptionsWithLabel);
+		super([msgLoading], msgLoading, defaultSelectBoxStyles, contextViewProvider, container, { labelText: kernelLabel, labelOnTop: false, ariaLabel: kernelLabel, id: kernelDropdownElementId } as ISelectBoxOptionsWithLabel);

 		if (modelReady) {
 			modelReady
@@ -691,7 +692,7 @@ export class AttachToDropdown extends SelectBox {
 		@ICapabilitiesService private _capabilitiesService: ICapabilitiesService,
 		@IConfigurationService private _configurationService: IConfigurationService
 	) {
-		super([msgLoadingContexts], msgLoadingContexts, contextViewProvider, container, { labelText: attachToLabel, labelOnTop: false, ariaLabel: attachToLabel, id: attachToDropdownElementId } as ISelectBoxOptionsWithLabel);
+		super([msgLoadingContexts], msgLoadingContexts, defaultSelectBoxStyles, contextViewProvider, container, { labelText: attachToLabel, labelOnTop: false, ariaLabel: attachToLabel, id: attachToDropdownElementId } as ISelectBoxOptionsWithLabel);
 		if (modelReady) {
 			modelReady
 				.then(model => {
--- a/src/sql/workbench/contrib/profiler/browser/profilerEditor.ts
+++ b/src/sql/workbench/contrib/profiler/browser/profilerEditor.ts
@@ -30,7 +30,6 @@ import { KeyMod, KeyCode } from 'vs/base/common/keyCodes';
 import { ContextKeyExpr, IContextKeyService, IContextKey } from 'vs/platform/contextkey/common/contextkey';
 import { KeybindingWeight } from 'vs/platform/keybinding/common/keybindingsRegistry';
 import * as types from 'vs/base/common/types';
-import { attachSelectBoxStyler } from 'sql/platform/theme/common/vsstyler';
 import { ColorScheme } from 'vs/platform/theme/common/theme';
 import { CancellationToken } from 'vs/base/common/cancellation';
 import { IStorageService } from 'vs/platform/storage/common/storage';
@@ -57,6 +56,7 @@ import { CommonFindController, FindStartFocusAction } from 'vs/editor/contrib/fi
 import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
 import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
 import { IComponentContextService } from 'sql/workbench/services/componentContext/browser/componentContextService';
+import { defaultSelectBoxStyles } from 'sql/platform/theme/browser/defaultStyles';

 class BasicView implements IView {
 	public get element(): HTMLElement {
@@ -255,7 +255,7 @@ export class ProfilerEditor extends EditorPane {
 		this._clearFilterAction = this._instantiationService.createInstance(Actions.ProfilerClearSessionFilter, Actions.ProfilerClearSessionFilter.ID, Actions.ProfilerClearSessionFilter.LABEL);
 		this._clearFilterAction.enabled = true;
 		this._viewTemplates = this._profilerService.getViewTemplates();
-		this._viewTemplateSelector = new SelectBox(this._viewTemplates.map(i => i.name), 'Standard View', this._contextViewService);
+		this._viewTemplateSelector = new SelectBox(this._viewTemplates.map(i => i.name), 'Standard View', defaultSelectBoxStyles, this._contextViewService);
 		this._viewTemplateSelector.setAriaLabel(nls.localize('profiler.viewSelectAccessibleName', "Select View"));
 		this._register(this._viewTemplateSelector.onDidSelect(e => {
 			if (this.input) {
@@ -268,7 +268,7 @@ export class ProfilerEditor extends EditorPane {
 		this._viewTemplateSelector.render(viewTemplateContainer);

 		this._sessionsList = [''];
-		this._sessionSelector = new SelectBox(this._sessionsList, '', this._contextViewService);
+		this._sessionSelector = new SelectBox(this._sessionsList, '', defaultSelectBoxStyles, this._contextViewService);
 		this._sessionSelector.setAriaLabel(nls.localize('profiler.sessionSelectAccessibleName', "Select Session"));
 		this._register(this._sessionSelector.onDidSelect(e => {
 			if (this.input) {
@@ -281,9 +281,6 @@ export class ProfilerEditor extends EditorPane {
 		sessionsContainer.style.paddingRight = '5px';
 		this._sessionSelector.render(sessionsContainer);

-		this._register(attachSelectBoxStyler(this._viewTemplateSelector, this.themeService));
-		this._register(attachSelectBoxStyler(this._sessionSelector, this.themeService));
-
 		this._actionBar.setContent([
 			{ action: this._createAction },
 			{ element: Taskbar.createTaskbarSeparator() },
--- a/src/sql/workbench/services/backupRestoreUrlBrowser/browser/urlBrowserDialog.ts
+++ b/src/sql/workbench/services/backupRestoreUrlBrowser/browser/urlBrowserDialog.ts
@@ -13,7 +13,6 @@ import * as TelemetryKeys from 'sql/platform/telemetry/common/telemetryKeys';
 import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
 import { localize } from 'vs/nls';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
-import { attachSelectBoxStyler } from 'sql/platform/theme/common/vsstyler';
 import * as DOM from 'vs/base/browser/dom';
 import * as strings from 'vs/base/common/strings';
 import { IClipboardService } from 'sql/platform/clipboard/common/clipboardService';
@@ -33,6 +32,7 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti
 import { onUnexpectedError } from 'vs/base/common/errors';
 import { Deferred } from 'sql/base/common/promise';
 import { defaultButtonStyles, defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles';
+import { defaultSelectBoxStyles } from 'sql/platform/theme/browser/defaultStyles';

 /**
 * This function adds one year to the current date and returns it in the UTC format.
@@ -120,7 +120,7 @@ export class BackupRestoreUrlBrowserDialog extends Modal {
 		tableContainer.setAttribute('role', 'presentation');

 		let azureAccountLabel = localize('backupRestoreUrlBrowserDialog.account', "Azure Account");
-		this._accountSelectorBox = this._register(new SelectBox([''], '', this._contextViewService, null, { ariaLabel: azureAccountLabel }));
+		this._accountSelectorBox = this._register(new SelectBox([''], '', defaultSelectBoxStyles, this._contextViewService, null, { ariaLabel: azureAccountLabel }));
 		this._accountSelectorBox.disable();
 		let accountSelector = DialogHelper.appendRow(tableContainer, azureAccountLabel, 'url-input-label', 'url-input-box', null, true);
 		DialogHelper.appendInputSelectBox(accountSelector, this._accountSelectorBox);
@@ -151,25 +151,25 @@ export class BackupRestoreUrlBrowserDialog extends Modal {
 		linkAccountButton.appendChild(linkAccount.el);

 		let tenantLabel = localize('backupRestoreUrlBrowserDialog.tenant', "Azure AD Tenant");
-		this._tenantSelectorBox = this._register(new SelectBox([], '', this._contextViewService, null, { ariaLabel: tenantLabel }));
+		this._tenantSelectorBox = this._register(new SelectBox([], '', defaultSelectBoxStyles, this._contextViewService, null, { ariaLabel: tenantLabel }));
 		this._tenantSelectorBox.disable();
 		let tenantSelector = DialogHelper.appendRow(tableContainer, tenantLabel, 'url-input-label', 'url-input-box', null, true);
 		DialogHelper.appendInputSelectBox(tenantSelector, this._tenantSelectorBox);

 		let subscriptionLabel = localize('backupRestoreUrlBrowserDialog.subscription', "Azure subscription");
-		this._subscriptionSelectorBox = this._register(new SelectBox([], '', this._contextViewService, null, { ariaLabel: subscriptionLabel }));
+		this._subscriptionSelectorBox = this._register(new SelectBox([], '', defaultSelectBoxStyles, this._contextViewService, null, { ariaLabel: subscriptionLabel }));
 		this._subscriptionSelectorBox.disable();
 		let subscriptionSelector = DialogHelper.appendRow(tableContainer, subscriptionLabel, 'url-input-label', 'url-input-box', null, true);
 		DialogHelper.appendInputSelectBox(subscriptionSelector, this._subscriptionSelectorBox);

 		let storageAccountLabel = localize('backupRestoreUrlBrowserDialog.storageAccount', "Storage account");
-		this._storageAccountSelectorBox = this._register(new SelectBox([], '', this._contextViewService, null, { ariaLabel: storageAccountLabel }));
+		this._storageAccountSelectorBox = this._register(new SelectBox([], '', defaultSelectBoxStyles, this._contextViewService, null, { ariaLabel: storageAccountLabel }));
 		this._storageAccountSelectorBox.disable();
 		let storageAccountSelector = DialogHelper.appendRow(tableContainer, storageAccountLabel, 'url-input-label', 'url-input-box', null, true);
 		DialogHelper.appendInputSelectBox(storageAccountSelector, this._storageAccountSelectorBox);

 		let blobContainerLabel = localize('backupRestoreUrlBrowserDialog.blobContainer', "Blob container");
-		this._blobContainerSelectorBox = this._register(new SelectBox([], '', this._contextViewService, null, { ariaLabel: blobContainerLabel }));
+		this._blobContainerSelectorBox = this._register(new SelectBox([], '', defaultSelectBoxStyles, this._contextViewService, null, { ariaLabel: blobContainerLabel }));
 		this._blobContainerSelectorBox.disable();
 		let blobContainerSelector = DialogHelper.appendRow(tableContainer, blobContainerLabel, 'url-input-label', 'url-input-box', null, true);
 		DialogHelper.appendInputSelectBox(blobContainerSelector, this._blobContainerSelectorBox);
@@ -194,7 +194,7 @@ export class BackupRestoreUrlBrowserDialog extends Modal {
 		let backupFileLabel = localize('backupRestoreUrlBrowserDialog.backupFile', "Backup file");

 		if (this._restoreDialog) {
-			this._backupFileSelectorBox = this._register(new SelectBox([], '', this._contextViewService, null, { ariaLabel: backupFileLabel }));
+			this._backupFileSelectorBox = this._register(new SelectBox([], '', defaultSelectBoxStyles, this._contextViewService, null, { ariaLabel: backupFileLabel }));
 			let backupFileSelector = DialogHelper.appendRow(tableContainer, backupFileLabel, 'url-input-label', 'url-input-box', null, true);
 			DialogHelper.appendInputSelectBox(backupFileSelector, this._backupFileSelectorBox);
 			this._backupFileSelectorBox.setOptions([]);
@@ -440,15 +440,6 @@ export class BackupRestoreUrlBrowserDialog extends Modal {


 	private registerThemeStylers(): void {
-		this._register(attachSelectBoxStyler(this._tenantSelectorBox, this._themeService));
-		this._register(attachSelectBoxStyler(this._accountSelectorBox, this._themeService));
-		this._register(attachSelectBoxStyler(this._subscriptionSelectorBox, this._themeService));
-		this._register(attachSelectBoxStyler(this._storageAccountSelectorBox, this._themeService));
-		this._register(attachSelectBoxStyler(this._blobContainerSelectorBox, this._themeService));
-		if (this._backupFileSelectorBox) {
-			this._register(attachSelectBoxStyler(this._backupFileSelectorBox, this._themeService));
-		}
-
 		this._register(this._sasButton);
 		this._register(this._okButton);
 		this._register(this._cancelButton);
--- a/src/sql/workbench/services/connection/browser/cmsConnectionWidget.ts
+++ b/src/sql/workbench/services/connection/browser/cmsConnectionWidget.ts
@@ -27,6 +27,7 @@ import { ILogService } from 'vs/platform/log/common/log';
 import { IErrorMessageService } from 'sql/platform/errorMessage/common/errorMessageService';
 import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
 import { defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles';
+import { defaultSelectBoxStyles } from 'sql/platform/theme/browser/defaultStyles';

 /**
 * Connection Widget clas for CMS Connections
@@ -55,7 +56,7 @@ export class CmsConnectionWidget extends ConnectionWidget {
 		if (authTypeOption) {
 			let authTypeDefault = this.getAuthTypeDefault(authTypeOption, OS);
 			let authTypeDefaultDisplay = this.getAuthTypeDisplayName(authTypeDefault);
-			this._authTypeSelectBox = new SelectBox(authTypeOption.categoryValues.map(c => c.displayName), authTypeDefaultDisplay, this._contextViewService, undefined, { ariaLabel: authTypeOption.displayName });
+			this._authTypeSelectBox = new SelectBox(authTypeOption.categoryValues.map(c => c.displayName), authTypeDefaultDisplay, defaultSelectBoxStyles, this._contextViewService, undefined, { ariaLabel: authTypeOption.displayName });
 		}
 	}

--- a/src/sql/workbench/services/connection/browser/connectionDialogWidget.ts
+++ b/src/sql/workbench/services/connection/browser/connectionDialogWidget.ts
@@ -47,6 +47,7 @@ import { ICapabilitiesService } from 'sql/platform/capabilities/common/capabilit
 import { onUnexpectedError } from 'vs/base/common/errors';
 import { FieldSet } from 'sql/base/browser/ui/fieldset/fieldset';
 import { KeyCode } from 'vs/base/common/keyCodes';
+import { defaultSelectBoxStyles } from 'sql/platform/theme/browser/defaultStyles';

 export interface OnShowUIResponse {
 	selectedProviderDisplayName: string;
@@ -191,7 +192,7 @@ export class ConnectionDialogWidget extends Modal {
 		this._body = DOM.append(container, DOM.$('.connection-dialog'));

 		const connectTypeLabel = localize('connectType', "Connection type");
-		this._providerTypeSelectBox = new SelectBox(this.providerDisplayNameOptions, this.selectedProviderType, this.contextViewService, undefined, { ariaLabel: connectTypeLabel });
+		this._providerTypeSelectBox = new SelectBox(this.providerDisplayNameOptions, this.selectedProviderType, defaultSelectBoxStyles, this.contextViewService, undefined, { ariaLabel: connectTypeLabel });
 		// Recent connection tab
 		const recentConnectionTab = DOM.$('.connection-recent-tab');
 		const recentConnectionContainer = DOM.append(recentConnectionTab, DOM.$('.connection-recent', { id: 'recentConnection' }));
@@ -279,8 +280,6 @@ export class ConnectionDialogWidget extends Modal {
 	}

 	private registerListeners(): void {
-		// Theme styler
-		this._register(styler.attachSelectBoxStyler(this._providerTypeSelectBox, this._themeService));
 		this._register(this._providerTypeSelectBox.onDidSelect(selectedProviderType => {
 			this.onProviderTypeSelected(selectedProviderType.selected);
 		}));
--- a/src/sql/workbench/services/connection/browser/connectionWidget.ts
+++ b/src/sql/workbench/services/connection/browser/connectionWidget.ts
@@ -15,7 +15,6 @@ import { IConnectionProfile, ServiceOptionType } from 'sql/platform/connection/c
 import { ConnectionOptionSpecialType } from 'sql/workbench/api/common/sqlExtHostTypes';
 import { ConnectionProfileGroup, IConnectionProfileGroup } from 'sql/platform/connection/common/connectionProfileGroup';
 import { IConnectionManagementService } from 'sql/platform/connection/common/connectionManagement';
-import * as styler from 'sql/platform/theme/common/styler';
 import { IAccountManagementService } from 'sql/platform/accounts/common/interfaces';

 import * as azdata from 'azdata';
@@ -46,7 +45,7 @@ import { isMssqlAuthProviderEnabled } from 'sql/workbench/services/connection/br
 import { RequiredIndicatorClassName } from 'sql/base/browser/ui/label/label';
 import { FieldSet } from 'sql/base/browser/ui/fieldset/fieldset';
 import { defaultButtonStyles, defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles';
-import { defaultCheckboxStyles, defaultEditableDropdownStyles } from 'sql/platform/theme/browser/defaultStyles';
+import { defaultCheckboxStyles, defaultEditableDropdownStyles, defaultSelectBoxStyles } from 'sql/platform/theme/browser/defaultStyles';

 const ConnectionStringText = localize('connectionWidget.connectionString', "Connection string");

@@ -144,7 +143,7 @@ export class ConnectionWidget extends lifecycle.Disposable {
 		if (authTypeOption) {
 			let authTypeDefault = this.getAuthTypeDefault(authTypeOption, OS);
 			let authTypeDefaultDisplay = this.getAuthTypeDisplayName(authTypeDefault);
-			this._authTypeSelectBox = new SelectBox(authTypeOption.categoryValues.map(c => c.displayName), authTypeDefaultDisplay, this._contextViewService, undefined, { ariaLabel: authTypeOption.displayName });
+			this._authTypeSelectBox = new SelectBox(authTypeOption.categoryValues.map(c => c.displayName), authTypeDefaultDisplay, defaultSelectBoxStyles, this._contextViewService, undefined, { ariaLabel: authTypeOption.displayName });
 			this._register(this._authTypeSelectBox);
 		}
 		this._providerName = providerName;
@@ -177,7 +176,7 @@ export class ConnectionWidget extends lifecycle.Disposable {

 	public createConnectionWidget(container: HTMLElement, authTypeChanged: boolean = false): void {
 		this._serverGroupOptions = [this.DefaultServerGroup];
-		this._serverGroupSelectBox = new SelectBox(this._serverGroupOptions.map(g => g.name), this.DefaultServerGroup.name, this._contextViewService, undefined, { ariaLabel: this._serverGroupDisplayString });
+		this._serverGroupSelectBox = new SelectBox(this._serverGroupOptions.map(g => g.name), this.DefaultServerGroup.name, defaultSelectBoxStyles, this._contextViewService, undefined, { ariaLabel: this._serverGroupDisplayString });
 		this._register(this._serverGroupSelectBox);
 		this._previousGroupOption = this._serverGroupSelectBox.value;
 		this._container = DOM.append(container, DOM.$('div.connection-table'));
@@ -299,9 +298,8 @@ export class ConnectionWidget extends lifecycle.Disposable {
 								return { text: v.displayName, value: v.value } as SelectOptionItemSQL;
 							});

-						this._customOptionWidgets[i] = new SelectBox(options, selectedValue, this._contextViewService, customOptionsContainer, { ariaLabel: option.displayName }, option.name);
+						this._customOptionWidgets[i] = new SelectBox(options, selectedValue, defaultSelectBoxStyles, this._contextViewService, customOptionsContainer, { ariaLabel: option.displayName }, option.name);
 						DialogHelper.appendInputSelectBox(customOptionsContainer, this._customOptionWidgets[i] as SelectBox);
-						this._register(styler.attachSelectBoxStyler(this._customOptionWidgets[i] as SelectBox, this._themeService));
 						break;
 					default:
 						this._customOptionWidgets[i] = new InputBox(customOptionsContainer, this._contextViewService, {
@@ -442,7 +440,7 @@ export class ConnectionWidget extends lifecycle.Disposable {
 		// Azure account picker
 		let accountLabel = localize('connection.azureAccountDropdownLabel', "Account");
 		let accountDropdown = DialogHelper.appendRow(this._tableContainer, accountLabel, 'connection-label', 'connection-input', 'azure-account-row');
-		this._azureAccountDropdown = new SelectBox([], undefined, this._contextViewService, accountDropdown, { ariaLabel: accountLabel });
+		this._azureAccountDropdown = new SelectBox([], undefined, defaultSelectBoxStyles, this._contextViewService, accountDropdown, { ariaLabel: accountLabel });
 		this._register(this._azureAccountDropdown);
 		DialogHelper.appendInputSelectBox(accountDropdown, this._azureAccountDropdown);
 		let refreshCredentials = DialogHelper.appendRow(this._tableContainer, '', 'connection-label', 'connection-input', ['azure-account-row', 'refresh-credentials-link']);
@@ -452,7 +450,7 @@ export class ConnectionWidget extends lifecycle.Disposable {
 		// Azure tenant picker
 		let tenantLabel = localize('connection.azureTenantDropdownLabel', "Azure AD tenant");
 		let tenantDropdown = DialogHelper.appendRow(this._tableContainer, tenantLabel, 'connection-label', 'connection-input', ['azure-account-row', 'azure-tenant-row']);
-		this._azureTenantDropdown = new SelectBox([], undefined, this._contextViewService, tenantDropdown, { ariaLabel: tenantLabel });
+		this._azureTenantDropdown = new SelectBox([], undefined, defaultSelectBoxStyles, this._contextViewService, tenantDropdown, { ariaLabel: tenantLabel });
 		this._register(this._azureTenantDropdown);
 		DialogHelper.appendInputSelectBox(tenantDropdown, this._azureTenantDropdown);
 	}
@@ -540,10 +538,7 @@ export class ConnectionWidget extends lifecycle.Disposable {
 	}

 	protected registerListeners(): void {
-		// Theme styler
-		this._register(styler.attachSelectBoxStyler(this._azureAccountDropdown, this._themeService));
 		if (this._serverGroupSelectBox) {
-			this._register(styler.attachSelectBoxStyler(this._serverGroupSelectBox, this._themeService));
 			this._register(this._serverGroupSelectBox.onDidSelect(selectedGroup => {
 				this.onGroupSelected(selectedGroup.selected);
 			}));
@@ -577,8 +572,6 @@ export class ConnectionWidget extends lifecycle.Disposable {
 		}

 		if (this._authTypeSelectBox) {
-			// Theme styler
-			this._register(styler.attachSelectBoxStyler(this._authTypeSelectBox, this._themeService));
 			this._register(this._authTypeSelectBox.onDidSelect(selectedAuthType => {
 				this.onAuthTypeSelected(selectedAuthType.selected, true);
 				this.setConnectButton();
@@ -586,14 +579,12 @@ export class ConnectionWidget extends lifecycle.Disposable {
 		}

 		if (this._azureAccountDropdown) {
-			this._register(styler.attachSelectBoxStyler(this._azureAccountDropdown, this._themeService));
 			this._register(this._azureAccountDropdown.onDidSelect(() => {
 				this.onAzureAccountSelected().catch(err => this._logService.error(`Unexpected error handling Azure Account dropdown click : ${err}`));
 			}));
 		}

 		if (this._azureTenantDropdown) {
-			this._register(styler.attachSelectBoxStyler(this._azureTenantDropdown, this._themeService));
 			this._register(this._azureTenantDropdown.onDidSelect((selectInfo) => {
 				this.onAzureTenantSelected(selectInfo.index);
 			}));
--- a/src/sql/workbench/services/fileBrowser/browser/fileBrowserDialog.ts
+++ b/src/sql/workbench/services/fileBrowser/browser/fileBrowserDialog.ts
@@ -20,7 +20,6 @@ import { Event, Emitter } from 'vs/base/common/event';
 import { localize } from 'vs/nls';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
-import { attachSelectBoxStyler } from 'sql/platform/theme/common/vsstyler';
 import * as DOM from 'vs/base/browser/dom';
 import * as strings from 'vs/base/common/strings';
 import { IClipboardService } from 'sql/platform/clipboard/common/clipboardService';
@@ -32,6 +31,7 @@ import { attachModalDialogStyler } from 'sql/workbench/common/styler';
 import { ILayoutService } from 'vs/platform/layout/browser/layoutService';
 import { ITextResourcePropertiesService } from 'vs/editor/common/services/textResourceConfiguration';
 import { defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles';
+import { defaultSelectBoxStyles } from 'sql/platform/theme/browser/defaultStyles';

 export class FileBrowserDialog extends Modal {
 	private _viewModel: FileBrowserViewModel;
@@ -95,7 +95,7 @@ export class FileBrowserDialog extends Modal {
 		});

 		let filterLabel = localize('fileFilter', "Files of type");
-		this._fileFilterSelectBox = new SelectBox(['*'], '*', this._contextViewService);
+		this._fileFilterSelectBox = new SelectBox(['*'], '*', defaultSelectBoxStyles, this._contextViewService);
 		this._fileFilterSelectBox.setAriaLabel(filterLabel);
 		let filterBuilder = DialogHelper.appendRow(tableContainer, filterLabel, 'file-input-label', 'file-input-box');
 		DialogHelper.appendInputSelectBox(filterBuilder, this._fileFilterSelectBox);
@@ -225,10 +225,6 @@ export class FileBrowserDialog extends Modal {
 		this._register(this._filePathInputBox.onLoseFocus((params: OnLoseFocusParams) => {
 			this.onFilePathBlur(params).catch(err => onUnexpectedError(err));
 		}));
-
-		// Theme styler
-		this._register(attachSelectBoxStyler(this._fileFilterSelectBox, this._themeService));
-
 		this._register(this._themeService.onDidColorThemeChange(e => this.updateTheme()));
 	}

--- a/src/sql/workbench/services/objectExplorer/browser/filterDialog/filterDialog.ts
+++ b/src/sql/workbench/services/objectExplorer/browser/filterDialog/filterDialog.ts
@@ -32,8 +32,8 @@ import Severity from 'vs/base/common/severity';
 import { status } from 'vs/base/browser/ui/aria/aria';
 import { IErrorMessageService } from 'sql/platform/errorMessage/common/errorMessageService';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
-import { defaultInputBoxStyles, defaultSelectBoxStyles } from 'vs/platform/theme/browser/defaultStyles';
-import { defaultEditableDropdownStyles } from 'sql/platform/theme/browser/defaultStyles';
+import { defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles';
+import { defaultEditableDropdownStyles, defaultSelectBoxStyles } from 'sql/platform/theme/browser/defaultStyles';

 // strings for filter dialog
 const OkButtonText = localize('objectExplorer.okButtonText', "OK");
--- a/src/sql/workbench/services/profiler/browser/profilerFilterDialog.ts
+++ b/src/sql/workbench/services/profiler/browser/profilerFilterDialog.ts
@@ -15,7 +15,6 @@ import { localize } from 'vs/nls';
 import { ProfilerInput } from 'sql/workbench/browser/editor/profiler/profilerInput';
 import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox';
 import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
-import { attachSelectBoxStyler } from 'sql/platform/theme/common/vsstyler';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import { generateUuid } from 'vs/base/common/uuid';
 import * as DOM from 'vs/base/browser/dom';
@@ -29,6 +28,7 @@ import { ILayoutService } from 'vs/platform/layout/browser/layoutService';
 import { ITextResourcePropertiesService } from 'vs/editor/common/services/textResourceConfiguration';
 import * as aria from 'vs/base/browser/ui/aria/aria';
 import { defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles';
+import { defaultSelectBoxStyles } from 'sql/platform/theme/browser/defaultStyles';

 const ClearText: string = localize('profilerFilterDialog.clear', "Clear all");
 const ApplyText: string = localize('profilerFilterDialog.apply', "Apply");
@@ -187,9 +187,8 @@ export class ProfilerFilterDialog extends Modal {
 	}

 	private createSelectBox(container: HTMLElement, options: string[], selectedOption: string, ariaLabel: string): SelectBox {
-		const dropdown = new SelectBox(options, selectedOption, this.contextViewService, undefined, { ariaLabel: ariaLabel });
+		const dropdown = new SelectBox(options, selectedOption, defaultSelectBoxStyles, this.contextViewService, undefined, { ariaLabel: ariaLabel });
 		dropdown.render(container);
-		this._register(attachSelectBoxStyler(dropdown, this._themeService));
 		return dropdown;
 	}

--- a/src/sql/workbench/services/restore/browser/restoreDialog.ts
+++ b/src/sql/workbench/services/restore/browser/restoreDialog.ts
@@ -30,7 +30,7 @@ import { Table } from 'sql/base/browser/ui/table/table';
 import { TableDataView } from 'sql/base/browser/ui/table/tableDataView';
 import * as DialogHelper from 'sql/workbench/browser/modal/dialogHelper';
 import { HideReason, Modal } from 'sql/workbench/browser/modal/modal';
-import { attachTableStyler, attachSelectBoxStyler } from 'sql/platform/theme/common/styler';
+import { attachTableStyler } from 'sql/platform/theme/common/styler';
 import * as TelemetryKeys from 'sql/platform/telemetry/common/telemetryKeys';
 import { RestoreViewModel, RestoreOptionParam, SouceDatabaseNamesParam } from 'sql/workbench/services/restore/browser/restoreViewModel';
 import * as FileValidationConstants from 'sql/workbench/services/fileBrowser/common/fileValidationServiceConstants';
@@ -51,7 +51,7 @@ import { IAccessibilityService } from 'vs/platform/accessibility/common/accessib
 import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
 import { IComponentContextService } from 'sql/workbench/services/componentContext/browser/componentContextService';
 import { defaultButtonStyles, defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles';
-import { defaultCheckboxStyles, defaultEditableDropdownStyles } from 'sql/platform/theme/browser/defaultStyles';
+import { defaultCheckboxStyles, defaultEditableDropdownStyles, defaultSelectBoxStyles } from 'sql/platform/theme/browser/defaultStyles';

 interface FileListElement {
 	logicalFileName: string;
@@ -520,7 +520,6 @@ export class RestoreDialog extends Modal {
 				break;
 			case ServiceOptionType.category:
 				propertyWidget = this.createSelectBoxHelper(container, option.description, option.categoryValues.map(c => c.displayName), DialogHelper.getCategoryDisplayName(option.categoryValues, option.defaultValue)!);
-				this._register(attachSelectBoxStyler(propertyWidget, this._themeService));
 				this._register(propertyWidget.onDidSelect(selectedDatabase => {
 					this.onCatagoryOptionChanged(optionName);
 				}));
@@ -567,7 +566,7 @@ export class RestoreDialog extends Modal {
 		const inputContainer = DOM.append(container, DOM.$('.dialog-input-section'));
 		DOM.append(inputContainer, DOM.$('.dialog-label')).innerText = label;
 		const inputCellContainer = DOM.append(inputContainer, DOM.$('.dialog-input'));
-		const selectBox = this._register(new SelectBox(options, selectedOption, this._contextViewService, inputCellContainer, { ariaLabel: label }));
+		const selectBox = this._register(new SelectBox(options, selectedOption, defaultSelectBoxStyles, this._contextViewService, inputCellContainer, { ariaLabel: label }));
 		selectBox.render(inputCellContainer);
 		return selectBox;
 	}
@@ -662,9 +661,6 @@ export class RestoreDialog extends Modal {
 	}

 	private registerListeners(): void {
-		// Theme styler
-		this._register(attachSelectBoxStyler(this._restoreFromSelectBox!, this._themeService));
-		this._register(attachSelectBoxStyler(this._sourceDatabaseSelectBox!, this._themeService));
 		this._register(this._browseFileButton!);
 		this._register(this._browseUrlButton!);
 		this._register(this._scriptButton!);
--- a/src/vs/base/browser/ui/selectBox/selectBox.ts
+++ b/src/vs/base/browser/ui/selectBox/selectBox.ts
@@ -70,7 +70,7 @@ export const unthemedSelectBoxStyles: ISelectBoxStyles = {
 	decoratorRightForeground: undefined,
 	selectListBackground: undefined,
 	selectListBorder: undefined,
-	focusBorder: undefined,
+	focusBorder: undefined
 };

 export interface ISelectData {