Question 184043 in Html Question posted in
Some basic documentation can be found here.

Html – Add button inside the label but without changing any styles

I have the code on my website with a header: <h3 class="label" type="button">
It is an accordion so I’d like to make it more accessible by changing it to:
<h3 class="label"><button aria-expanded="true">. But it adds some styling on top for the button. I don’t want this, I would like to keep the styling that is now. Is there any efficient way to do this, other than just styling the special class of the button?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    It needs all: inherit style, can be added inline.


  2. 0

    You can apply a global inherit to the button element:

    button.aria-button {
    all: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

    and html:

    <h3 class="label">
    <button class="aria-button" aria-expanded="true">
        {yourText}
    </button>
</h3>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search