Height of common input components is not consistent (microsoft#167098)

Height of common input components is not consistent. Fixes microsoft#167078

Author: aeschli

src/vs/base/browser/ui/inputbox/inputBox.css

@@ -14,10 +14,6 @@
 	font-size: inherit;
 }
 
-.monaco-inputbox.idle {
-	border: 1px solid transparent;
-}
-
 .monaco-inputbox > .ibwrapper > .input,
 .monaco-inputbox > .ibwrapper > .mirror {
 

src/vs/base/browser/ui/inputbox/inputBox.ts

@@ -377,7 +377,7 @@ export class InputBox extends Widget {
 		this.element.classList.add(this.classForType(message.type));
 
 		const styles = this.stylesForType(this.message.type);
-		this.element.style.border = styles.border ? `1px solid ${styles.border}` : '';
+		this.element.style.borderColor = styles.border || 'transparent';
 
 		if (this.message.content && (this.hasFocus() || force)) {
 			this._showMessage();
@@ -551,10 +551,10 @@ export class InputBox extends Widget {
 		this.input.style.backgroundColor = 'inherit';
 		this.input.style.color = foreground;
 
-		if (border) {
-			this.element.style.border = '1px solid ' + border;
-		}
-
+		// there's always a border, even if the color is not set.
+		this.element.style.borderColor = border || 'transparent';
+		this.element.style.borderWidth = '1px';
+		this.element.style.borderStyle = 'solid';
 	}
 
 	public layout(): void {