Question

I am trying to make form elements fit into a visual style with other DOM elements including making buttons and text-inputs fit together, buttons and divs as a single visual element (like a form button attached to some content div with the same background color).

Why don’t form elements follow the same rules as other DOM elements? they seem to have their own idea of how to be 10px tall from every other DOM element. Even if I give them all the css I can think of:

.mybutton, .mylink {
    display: block;
    float: left;
    height: 10px;
    width: 20px;
    margin: 0;
    padding: 0;
    line-height: 10px;
    border: none;
}

I have these two elements directly next to each other and I want them to connect and appear as a single visual element. Please don’t suggest putting it all inside a div with the proper styling – I want the button and link to have a different “hover” styling from each other.

the only solution I can get to work so far is to just make them both links and use javascript to submit the form using the onClick event. This doesn’t work at all for people without javascript, and that sucks.

Thank you for your help! I need to whip these form elements into DOM obeying shape!

PS – I have also noticed this effect when trying to get a button and text input to align in a similar fashion. Maybe it’s just buttons in general? I tried using <button> and <input type="button"> to no avail. They are both f**ked

Answer 1

They don’t. That’s how it works, I believe Safari allows it more than other browsers, but not everyone likes it

This is from an outdated specification, but I can’ find it a recent one: (emphasis mine)

8.1 Styling form controls

The CSS working group is expected to develop a language designed, amongst other things, for the advanced styling of form controls. In the meantime, technologies such as [HTC] and [XBL2] can be used as guides for what is expected.

UAs, in the absence of such advanced styling information, may render form controls described in this draft as they wish. It is recommended that form controls remain faithful to the look and feel of the system’s global user interface.

CSS 2.1 explicitly does not define how CSS applies to form controls. [CSS21]