Styling Blazor EditForm components - focus on InputText - html

Question

I am learning Blazor framework and it has it's own HTML elements. I tried to style InputText element, but however it does not seem to work with some CSS properties. For example "Focus".
My CSS:
input:focus, select:focus, .inputstyle:focus {
border: 1px solid #ff6801;
}
HTML Input works fine, but InputText does not. My code:
<input type="text" name="address" id="address" />
<InputText class="inputstyle" #bind-Value="#Advert.Title" />
So how could I put css Focus on InputText?

Answer 1

InputText is a Blazor component, so it can't get input focus. But you can set focus on its internal input element... You can do something like this:
You can derives from InputText, and use ElementReference.FocusAsync()
Note: This feature is only available in .Net 5.0
InputTextSetFocus.razor
#inherits InputText
<input #ref="inputElement"
#attributes="AdditionalAttributes"
class="#CssClass"
value="#CurrentValue"
#oninput="EventCallback.Factory.CreateBinder<string>(this, __value => CurrentValueAsString = __value, CurrentValueAsString)" />
#code {
private ElementReference inputElement;
protected override void OnAfterRender(bool firstRender)
{
base.OnInitialized();
inputElement.FocusAsync();
}
}
Usage
#page "/"
<EditForm Model="employee">
<InputTextSetFocus #bind-Value="#employee.ID" />
</EditForm>
#code
{
private Employee employee = new Employee();
public class Employee
{
public string ID { get; set; }
public string Name { get; set; }
}
}