A way to style a blazor EditForm

Issue

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>

Solution

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

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

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

<style>
    #MyEditForm {
        background-color: yellow;
    }

    .MyEditClass {
        font-family: "Comic Sans MS", "Comic Sans", cursive;
    }
</style>

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.