diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.razor.cs
index 832e3376fa..eccfe810bf 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.razor.cs
@@ -165,7 +165,7 @@ protected override void RegisterCssClasses()
ClassBuilder.Register(() => IsUnderlined ? "bit-srb-und" : string.Empty);
- ClassBuilder.Register(() => _inputHasFocus ? $"bit-srb-{(FixedIcon ? "fic-" : string.Empty)}foc" : string.Empty);
+ ClassBuilder.Register(() => _inputHasFocus ? $"bit-srb-{(FixedIcon ? "fic-" : string.Empty)}foc {Classes?.Focused}" : string.Empty);
ClassBuilder.Register(() => ShowSearchButton ? "bit-srb-ssb" : string.Empty);
@@ -175,6 +175,8 @@ protected override void RegisterCssClasses()
protected override void RegisterCssStyles()
{
StyleBuilder.Register(() => Styles?.Root);
+
+ StyleBuilder.Register(() => _inputHasFocus ? Styles?.Focused : string.Empty);
}
protected override async Task OnInitializedAsync()
@@ -222,12 +224,14 @@ private void HandleInputFocusIn()
{
_inputHasFocus = true;
ClassBuilder.Reset();
+ StyleBuilder.Reset();
}
private void HandleInputFocusOut()
{
_inputHasFocus = false;
ClassBuilder.Reset();
+ StyleBuilder.Reset();
}
private async Task HandleOnSearchButtonClick()
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBoxClassStyles.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBoxClassStyles.cs
index 7d0f28ed41..a5df0720ba 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBoxClassStyles.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBoxClassStyles.cs
@@ -12,6 +12,11 @@ public class BitSearchBoxClassStyles
///
public string? InputContainer { get; set; }
+ ///
+ /// Custom CSS classes/styles for the focus state of the BitSearchBox.
+ ///
+ public string? Focused { get; set; }
+
///
/// Custom CSS classes/styles for the search box's clear button.
///
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.cs
index fcbddfb7eb..095550d3b8 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.cs
@@ -186,6 +186,20 @@ public partial class BitSearchBoxDemo
Description = "Custom CSS classes/styles for the root element of the search box.",
},
new()
+ {
+ Name = "InputContainer",
+ Type = "string?",
+ DefaultValue = "null",
+ Description = "Custom CSS classes/styles for the input container of the BitSearchBox.",
+ },
+ new()
+ {
+ Name = "Focused",
+ Type = "string?",
+ DefaultValue = "null",
+ Description = "Custom CSS classes/styles for the focus state of the BitSearchBox.",
+ },
+ new()
{
Name = "ClearButton",
Type = "string?",