Home/ Questions/Q 6903529
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T07:56:13+00:00

I am trying to replace div elements with button elements to improve accessibility, but

  • 0

I am trying to replace div elements with button elements to improve accessibility, but I need the buttons to layout like the divs used to do. (note this only needs to work in webkit)

The div takes the width of the parent container, while the button only takes the place needed to display its content.

How can I change that?

I would not like to set something like width: 100%, because if you are using more then one button in a container with display: webkit-box the divs nicely layout to use remaining space.

Here is a small example:

<!DOCTYPE html>
<html>
    <head>
        <title>button test</title>
        <style>
            .mybutton{
                display: block;
                border: 1px solid red;
                -webkit-appearance: none;
                -webkit-border-radius: 6px;
                background-color: transparent;
                -webkit-gradient(linear,left bottom,left top,color-stop(0, #A8ACB9),color-stop(1, #eee));
                text-align: center;
            }

        </style>
    </head>
    <body>


        <div class="mybutton">Div Button</div>

        <button class="mybutton">Button</button>

    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If your button is in a container with “display: -webkit-box” then just add “-webkit-box-flex: 1” to the button (or any elements) within that container. This solves it.

    http://jsfiddle.net/y53VT/

    • 0