diff --git a/packages/fiori/src/themes/ShellBar.css b/packages/fiori/src/themes/ShellBar.css
index 960695bbd136..611d38310370 100644
--- a/packages/fiori/src/themes/ShellBar.css
+++ b/packages/fiori/src/themes/ShellBar.css
@@ -373,14 +373,28 @@ ui5-icon[data-count]::before {
 	height: 100%;
 }
 
-::slotted(ui5-input:hover) {
+::slotted(ui5-input[focused]) {
+	outline: 1px dotted var(--sapContent_ContrastFocusColor);
+}
+
+/**
+* IE styles
+*/
+ui5-input[value-state]:not([readonly]) {
+	background: var(--sapShellColor);
+	border: 1px solid var(--sapShell_InteractiveBorderColor);
+}
+
+ui5-input[value-state]:not([readonly]):hover,
+ui5-input:not([value-state]):not([readonly]):hover {
 	background: var(--sapShell_Hover_Background);
+	border: 1px solid var(--sapShell_InteractiveBorderColor);
 }
 
-::slotted(ui5-input[focused]) {
+ui5-input[value-state]:not([value-stat="None"])[focused] {
 	outline: 1px dotted var(--sapContent_ContrastFocusColor);
 }
-
+/* IE styles end */
 
 .ui5-shellbar-copilot-wrapper {
 	position: relative;
diff --git a/packages/fiori/test/pages/ShellBar.html b/packages/fiori/test/pages/ShellBar.html
index 607cf0253cfa..8ad438cb3cc0 100644
--- a/packages/fiori/test/pages/ShellBar.html
+++ b/packages/fiori/test/pages/ShellBar.html
@@ -96,7 +96,7 @@
 	<ui5-shellbar-item icon="action-settings" text="Settings"></ui5-shellbar-item>
 	<ui5-shellbar-item icon="sys-help" text="Help"></ui5-shellbar-item>
 
-	<ui5-input slot="searchField"></ui5-input>
+	<ui5-input slot="searchField" value-state="Error"></ui5-input>
 
 </ui5-shellbar>