Blazor css multiple styling for same element type

Question

I need to implement different styles for one type of element in my project's page. But I am not able to have more than one fully functional styling.

In this example I have my PartPage.razor with its PartPage.razor.css. and I am implementing two identical styles with different naming, trying to get the same result while implementing through different style names:

PartPage.razor

@page "/part"
<th>
    <label class="form-label-another-label">SomeLabel</label>
    <label class="form-label">SomeLabel</label>
    <input type="text" class="form-control" placeholder="SomeText" />
    <input type="text" class="form-control-another-control" placeholder="SomeText" />
</th>

PartPage.razor.css

.form-label{
    color: aqua
}

.form-label-another-label {
    color: aqua 
}

.form-control {
    color: #077df2;
    background: #f2f0f0;
}

.form-control-another-control {
    color: #077df2;
    background: #f2f0f0;
}

and this is what it does in the app: blazor app

It seems like it works allright for text adjustment, but not for the form control. Why is that? Is there a way how to have two stylings for same element?

The css is correctly connected to the razor page as this: page css

Gabriel Weidmann · Accepted Answer · 2024-10-08 15:18:36Z

1

The problem is that you are using a CSS class that is already available in blazor by default:

If you rename form-control to something different, e.g. form-control1 (in CSS and in HTML) the result will look like this:

So watch out for already used CSS class names and remember the browser inspection tool is your friend in the web :-)

answered Oct 8, 2024 at 15:18

Gabriel Weidmann

9291 gold badge15 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user0 Over a year ago

Hi, thank you for your answer why this happens. However, I also need answer to my second question: " Is there a way how to have two stylings for same element?" as my goal is to have two separate stylings for form-control in one CSS file. If yes, how do I make it?

Rena Over a year ago

Hi @user0, I think you are still not understand Gabriel Weidmann's answer. You can check my answer below.

Rena · Accepted Answer · 2024-10-09 06:52:23Z

0

Blazor uses Bootstrap by default. form-control is the default Bootstrap css style, so that the element applies the build-in style which caused the difference.

A quick way is avoid using Bootstrap default css style name, change like below:

.form-label {
    color: aqua
}

.form-label-another-label {
    color: aqua
}

.form-control-custom {
    color: #077df2;
    background: #f2f0f0;
}

.form-control-another-control {
    color: #077df2;
    background: #f2f0f0;
}

Then use it in the view:

<th>
    <label class="form-label-another-label">SomeLabel</label>
    <label class="form-label">SomeLabel</label>
    <input type="text" class="form-control-custom" placeholder="SomeText" />
    <input type="text" class="form-control-another-control" placeholder="SomeText" />
</th>

answered Oct 9, 2024 at 6:52

Rena

37.2k7 gold badges50 silver badges93 bronze badges

2 Comments

user0 Over a year ago

I see now, probably I have specified the question in a bad way. In this case, I would like to implement the bootstraps settings to my custom one and then "override" certain values. something like: .form-control-another-control { //here somehow inherit from default .form-control and add/override certain values color: #077df2; background: #f2f0f0; }

Rena Over a year ago

Hi @user0, Yes, just custom one is very easy. For overriding styles, you may write all of the default css class/id in the file, then override it with new value and end with !important .

Collectives™ on Stack Overflow

Blazor css multiple styling for same element type

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related