diff --git a/dev/vscode-textfield/validation-min-validation.html b/dev/vscode-textfield/validation-min-validation.html
index 48cc51c6..f05708a8 100644
--- a/dev/vscode-textfield/validation-min-validation.html
+++ b/dev/vscode-textfield/validation-min-validation.html
@@ -21,7 +21,7 @@
   <body class="vscode-light">
     <main>
       <h1>Textfield</h1>
-      <h2>File input</h2>
+      <h2>Validation min validation</h2>
       <vscode-demo>
         <style>
           input[type='number']:invalid {
diff --git a/dev/vscode-textfield/validation-on-value-change.html b/dev/vscode-textfield/validation-on-value-change.html
index 63031f34..0555827e 100644
--- a/dev/vscode-textfield/validation-on-value-change.html
+++ b/dev/vscode-textfield/validation-on-value-change.html
@@ -21,7 +21,7 @@
   <body class="vscode-light">
     <main>
       <h1>Textfield</h1>
-      <h2>File input</h2>
+      <h2>Validation on value change</h2>
       <vscode-demo>
         <style>
           input[type='text']:invalid {
diff --git a/src/vscode-textfield/vscode-textfield.styles.ts b/src/vscode-textfield/vscode-textfield.styles.ts
index b9bc81bc..69967e36 100644
--- a/src/vscode-textfield/vscode-textfield.styles.ts
+++ b/src/vscode-textfield/vscode-textfield.styles.ts
@@ -17,7 +17,7 @@ const styles: CSSResultGroup = [
       background-color: var(--vscode-settings-textInputBackground, #313131);
       border-color: var(
         --vscode-settings-textInputBorder,
-        var(--vscode-settings-textInputBackground, #3c3c3c)
+        var(--vscode-settings-textInputBackground, #313131)
       );
       border-radius: 4px;
       border-style: solid;
@@ -34,14 +34,15 @@ const styles: CSSResultGroup = [
       border-color: var(--vscode-focusBorder, #0078d4);
     }
 
-    :host([invalid]),
-    :host(:invalid) {
+    :host([invalid]) .root,
+    :host(:invalid) .root {
+      background-color: var(--vscode-inputValidation-errorBackground, #5a1d1d);
       border-color: var(--vscode-inputValidation-errorBorder, #be1100);
     }
 
-    :host([invalid]) input,
-    :host(:invalid) input {
-      background-color: var(--vscode-inputValidation-errorBackground, #5a1d1d);
+    :host([invalid][focused]) .root,
+    :host(:invalid[focused]) .root {
+      border-color: var(--vscode-inputValidation-errorBorder, #be1100);
     }
 
     ::slotted([slot='content-before']) {
@@ -61,14 +62,14 @@ const styles: CSSResultGroup = [
     }
 
     input {
-      background-color: var(--vscode-settings-textInputBackground, #313131);
+      background-color: transparent;
       border: 0;
       box-sizing: border-box;
       color: var(--vscode-settings-textInputForeground, #cccccc);
       display: block;
       font-family: var(--vscode-font-family, ${defaultFontStack});
       font-size: var(--vscode-font-size, 13px);
-      font-weight: var(--vscode-font-weight, 'normal');
+      font-weight: var(--vscode-font-weight, normal);
       line-height: 18px;
       outline: none;
       padding-bottom: 3px;
@@ -102,7 +103,7 @@ const styles: CSSResultGroup = [
       cursor: pointer;
       font-family: var(--vscode-font-family, ${defaultFontStack});
       font-size: var(--vscode-font-size, 13px);
-      font-weight: var(--vscode-font-weight, 'normal');
+      font-weight: var(--vscode-font-weight, normal);
       line-height: 20px;
       padding: 0 14px;
     }
diff --git a/src/vscode-textfield/vscode-textfield.test.ts b/src/vscode-textfield/vscode-textfield.test.ts
index 7d181292..8968af22 100644
--- a/src/vscode-textfield/vscode-textfield.test.ts
+++ b/src/vscode-textfield/vscode-textfield.test.ts
@@ -277,4 +277,22 @@ describe('vscode-textfield', () => {
 
     expect(el.checkValidity()).to.eq(false);
   });
+
+  it('should reflect invalid property to the invalid attribute', async () => {
+    const el = await fixture<VscodeTextfield>(
+      '<vscode-textfield></vscode-textfield>'
+    );
+
+    expect(el.hasAttribute('invalid')).to.be.false;
+
+    el.invalid = true;
+    await el.updateComplete;
+
+    expect(el.hasAttribute('invalid')).to.be.true;
+
+    el.invalid = false;
+    await el.updateComplete;
+
+    expect(el.hasAttribute('invalid')).to.be.false;
+  });
 });
diff --git a/src/vscode-textfield/vscode-textfield.ts b/src/vscode-textfield/vscode-textfield.ts
index 4aa97d4f..3af6cf18 100644
--- a/src/vscode-textfield/vscode-textfield.ts
+++ b/src/vscode-textfield/vscode-textfield.ts
@@ -36,9 +36,8 @@ type InputType =
  * @fires {Event} change
  *
  * @cssprop [--vscode-settings-textInputBackground=#313131]
- * @cssprop [--vscode-settings-textInputBorder=var(--vscode-settings-textInputBackground, #3c3c3c)]
+ * @cssprop [--vscode-settings-textInputBorder=var(--vscode-settings-textInputBackground, #313131)]
  * @cssprop [--vscode-settings-textInputForeground=#cccccc]
- * @cssprop [--vscode-settings-textInputBackground=#313131]
  * @cssprop [--vscode-focusBorder=#0078d4]
  * @cssprop [--vscode-font-family=sans-serif] - A sans-serif font type depends on the host OS.
  * @cssprop [--vscode-font-size=13px]
