CODEWITHSUNDEEP
htmlcssresizehtml-selecthtml-input
User
User

Reputation: 30945

INPUT and SELECT elements custom size

As I understand, width/padding/margin properties only work on block level elements. However, on INPUT and SELECT elements I am able to specify the width, which works. Should it?

I could write something like this:

<input type="text" style="display:block;" />

But is it necessary?

Can anyone explain please why it works?

Upvotes: 1

Views: 1562

Answers (5)

Quentin
Quentin

Reputation: 943193

The spec says:

Applies to: all elements but non-replaced inline elements, table rows, and row groups

Form controls, such as input and select elements are replaced inline elements (the element is replaced with a form control - the text content of it is not displayed like a normal element).

Since they are replaced, they are not non-replaced, so the width property applies.

Upvotes: 4

Gabriel Hurley
Gabriel Hurley

Reputation: 40052

Technically, that's a rendering property which is browser-specific. At this point most browsers do allow you to set the width, but it's not guaranteed (especially on older browsers) and you definitely can run into bugs with it.

The W3 spec for the input element technically makes it an inline element. Inline-block isn't even a part of the W3 spec, it's part of CSS2 (hence older browsers being inconsistent).

IE has some funny bugs if you specify width as a percentage and put a whole lot of text into it, for example.

Long story short, it's almost always safe, just not part of any official spec that I've seen.

Upvotes: 0

wheresrhys
wheresrhys

Reputation: 23500

Form elements are the black sheep of the HTML/CSS world - there's lots of properties which don't work like normal HTML elements.

While it doesn't answer yor question, you might find the following discussion interesting: http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/

Upvotes: 0

Ionuț G. Stan
Ionuț G. Stan

Reputation: 179109

Actually, they're not really inline elements, but rather inline-block elements. This allows you to specify width, height and other block-specific properties without the need to break the flow of inline elements. In good browsers you can use "display:inline-block" on any element to achieve the same thing.

Upvotes: 4

Thinker
Thinker

Reputation: 14464

Did you thing what happened if that would be not possible? When INPUT element was introduced there was no CSS. And width of INPUT element is absolutely required in HTML for creating proper forms.

Upvotes: -1

Related Questions