Home/ Questions/Q 6696373
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T06:20:02+00:00

Test page: <!DOCTYPE html> <html> <head> <title>button border hover test</title> <style type=text/css> input {

  • 0

Test page:

<!DOCTYPE html>
<html>
    <head>
        <title>button border hover test</title>
        <style type="text/css">
            input
            {
                border: 0;
                padding: 0;
            }

            input:hover
            {
                background-color: fuchsia;
            }
        </style>
    </head>
    <body>
        <form>
            <input type="button" value="input element" /><br>
        </form>
    </body>
</html>

The background colour does not change. If you set the padding to anything higher than 0, the background colour does change.
I’m not seeing this behaviour in Firefox.

Having a padding of 1px isn’t disruptive to the layout, but does anyone know of a way to make this work with 0 padding?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There are two possible solutions.

    1. Use a <button> element instead.
    2. Use padding. But even then, sometimes the hover doesn’t work.

    Some relevant information from http://www.sitepoint.com/forums/showthread.php?769898-button-vs.-input-type-quot-button-quot

    <button> can contain HTML, and is easier to style with CSS, which
    actually gets applied across browsers. However, there are some
    drawbacks to using it in IE. IE doesn’t properly detect the value
    attribute (and uses the tag’s content instead as the value), and all
    values are sent to the server, whether or not the button is clicked.
    This makes using it as a a little tricky.

    <input type="submit"> doesn’t have any value or detection issues.
    However, you can’t add HTML like with and can only use the
    value tag. It’s also harder to style, and the styling doesn’t always
    respond well across browsers.

    • 0