Set an attribute of a HTML compnent in CSS

I’m using Fluent UI Web Components in my HTML project. I’m trying to, by default, set all the fluent-button’s appearance attribute to accent.
Normally, I have to use the below code to create a button:

<fluent-button appearance="accent">button text</fluent-button>

Which results in this:
screenshot of accent button
But I would like to remove the appearance attribute and set it in CSS. I tried this:

fluent-button {
    appearance: accent;
    color: #e8e8e8;
}

<fluent-button>button text</fluent-button>

But that just creates a normal white button with (almost) white text.

How do I make the appearance attribute apply by default in CSS?

I’m not familiar with Fluent UI but I assume that CSS doesn’t recognise it, so appearance: accent are not a valid property/value pair.
I guess you would use ordinary CSS to give the button that appearance.

I think you’ll need to refer to the documentation or articles that show how to change the buttons appearance.

I doubt many here will have experience of this and it has very little to with css as its a css-in-js component and built with js.

I’ll move the thread to JS in case someone who has used this can chime in. :slight_smile:

1 Like

@SamA74 What’s “ordinary CSS”?
@PaulOB I see. I will look through the articles I can find and see if I can find a solution.

By the way: I don’t want to do any of this with Typescript, Blazor, React, etc. Only pure HTML and CSS, and maybe a bit of JS too if it’s needed.

1 Like

What you’re trying to do is not part of CSS.

document.querySelectorAll("fluent-button").forEach((e) => e.setAttribute("appearance","accent"));

(or put the attribute into the HTML, as you should do.)

1 Like

@m_hutley Solved! Thanks.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.