why don't html form elements obey my CSS?

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]

Answer 2

is there any text/value on these buttons as you may need to change the text size otherwise it would force the height bigger. if you can post some html it'd be easier to answer. Josh

Answer 3

Yea, you can't. I find myself fiddling alot with height,padding, font size and display properties to get them to look how i want, and even them, it's never perfect in every browser

Answer 4

Found the answer... it wasn't either of those... sorry guys :(

the elements had inherited a padding of 3px (because of the style was set using id vs the classes I used to make them the same)

Apparently the background color will not get bigger when you increase the padding on a button, but it will get bigger on a link.

boo

Answer 5

There isn't a way to describe most form fields using CSS. It's difficult to change their style because of this, as there aren't a standard set of styles to override.

For instance, see this example of how to make button elements look like links

The CSS3 spec suggests ways of how it might work in the future