A way to style a blazor EditForm


i am wondering if its possible to somehow style a blazor Editform with css or something else, I’m trying to figure out how i can change the position of the EditForm and change the width, height etc, if its even possible.

I tried to assign a class/id to the editform but that is not possible.

<EditForm Model="@esuper">
<label for="Firstname">First Name</label>
<InputText id="firstname" @bind-Value="firstName"></InputText>


You can add style on several ways, I post here an example using class, style and via element id:

<EditForm Model="@exampleModel" 
    style="color: blue"
        <label>Some Text</label>
        <InputText id="name" @bind-Value="exampleModel.Name" />

        <button type="submit">Submit</button>

    #MyEditForm {
        background-color: yellow;

    .MyEditClass {
        font-family: "Comic Sans MS", "Comic Sans", cursive;

Enjoy the result:

changing EditForm css

For detailed information about how this internally works, read about Attribute splatting and arbitrary parameters.

Answered By – dani herrera

Answer Checked By – Willingham (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.