CODEWITHSUNDEEP
csswebkit
Daniel Kurka
Daniel Kurka

Reputation: 7985

Force button element to layout like div

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>

Upvotes: 4

Views: 3334

Answers (3)

Darek Rossman
Darek Rossman

Reputation: 1323

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/

Upvotes: 4

methodofaction
methodofaction

Reputation: 72415

I'm not sure why you have backward slashes on your -webkit rules. Remove them and they will behave the same as divs, except for some inherited styles that need to be resetted.

You can see an example of buttons and inputs playing nicely with webkit box here: http://jsfiddle.net/dt592/

Upvotes: 1

Michiel
Michiel

Reputation: 8103

Maybe you should go more specific. Try button.mybutton { in your css...

Upvotes: 0

Related Questions