listbox and select box (#23504)

* listbox * select box * fix tests * one more test
2026-01-26 01:25:38 -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/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!);