Can someone explain `size` of an `input` to me?
Tailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
17 Replies
The size attribute specifies the width in amount of characters
so it accepts a number as value, not a percentage like you have currently
ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/size
HTML attribute: size - HTML: HyperText Markup Language | MDN
The size attribute defines the width of the and the height of the element. For the input, if the type attribute is text or password then it's the number of characters. This must be an integer value 0 or higher. If no size is specified, or an invalid value is specified, the input has no size declared, and the form control will be the default wi...
I thought so, but why does it work?
And if I substitute it with
width, fit-content doesn't behave the sameah is see my answer was not complete
still I think you should set the width with (inline) css
so its the same, but also accepts an integer as value
I think according to the spec, even
width attribute should only accept integers but this works too
https://play.tailwindcss.com/Muy9ZMbb1hTailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
https://html.spec.whatwg.org/multipage/embedded-content-other.html#attr-dim-width
This one I use
width attribute and css prop but the default size is taken into account for fit-contentTailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
size is an old presentational HTML attribute and refers to the number of characters as @markboots. wrote. It essentially sets the "intrinsic size" of a form control if no CSS is applied.
img is a completely different element that has a HTML width attribute which requires a unit. It has nothing to do with the size of an input control which only accepts numbers. Comparing both doesn't make sense.
size is valid only for form controls and has no link to CSS property width . The CSS width property takes all sort of units and also requires a unit to be specified; like the img attribute of the same name.
To some extend the result would be close to using ch in CSS (em is usually wider).
<input size="15" type="text" />
.input { width: 15ch }
There is no width attribute for text input controls.
Using the HTML size attribute only makes sense as a fallback until CSS is loaded and applied, like the width/height attributes on img.
There is no point is setting the attribute esp. if the control will become a grid or flexbox item.
CSS will always overwrite presentational attributes.
fit-content has no effect on input controls.you can check my last pen, without
size, fit-content works differently
also this
The attributes, if specified, must have values that are valid non-negative integers.and input is an embedded content, so they do have width
aside from the spec above:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#width
: The Input (Form Input) element - HTML: HyperText Markup Language ...
The HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input t...
I consolidate both examples here
https://play.tailwindcss.com/9s0Nih1gUZ
Tailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
I think the browser just removed the percentage and take the number as is. Still,
fit-content seems to consider the size first before the width and max-width@phyrasaur the
width attribute for an input element only applies to the <input type="image"> element, as is stated in the vey first line of the MDN paragraph you linked to. This particular unique "input type"is indeed an image and yes: that one then has width and height attributes to size it, just like the normal img element, but the text input from your example hasn't. And it's not "embedded content" either (see below).
Because the fieldset (the input's parent element) does not have any explicit width applied, the input's width: 100% has no effect. It shrinks to it's default size and the fieldset adapts.
The max-width of the text input would only kick in, if you a) assign a CSS width to the input element or b) make the parent fiedset larger than 500px or c) add significantly more text into the label.
Because you declared the fieldset to be a grid container, different sizing rules apply for both the label and input elements, as they became grid items.
without size, fit-content works differentlywell yes, by removing the
size attribute you are also removing information that affects the initial "horizonal length" of the text input and thus the computed width of the fieldset containing it. fit-content on the fieldset makes it shrink to the calculated runtime width of it's children, a label with two words and a text input element that has a default size the browser will apply in case no other sizing information is provided.
Without that explicit size on the text input the fieldset simple "fits" the widest of its two children (aka "the content"): the empty text input is the largest in this case. However, if you were to add more text to the label, the fieldset would adjust to fit that. The text input then scales along because it's a grid item as well but it'll stop at max-width: 500px.and input is an embedded contentWhere do you get the information from? input elements are "embedded" content? Sure enough,
<input type="image"> is a unique exception, but there's none involved in your examples. It's essentially an img with additional "input control" features such as acting like a button. It's a hybrid.
The WHATWG also clearly states the exception for image inputs, aka "Image Button":
when their type attribute is in the Image Button state, input elements may be specified to give the dimensions of the visual content of the elementThe image input -- being an img after all -- is one of the special replaced elements (you probably had these in mind) and several of them have width and height attributes. https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element These elements are "replaced" by a resource external to the document they're in and include audio, video, svg, canvas, applet, embed, object, iframe, and img.
Replaced elements - CSS: Cascading Style Sheets | MDN
In CSS, a replaced element is an element whose representation is outside the scope of CSS; they're external objects whose representation is independent of the CSS formatting model.
your mixing up several unrelated concepts: input types of text and image, html attributes and CSS properties, embedded and replace elements, intrinsic sizes and grid item sizing, element and parent dimensions.
Although you linked to the right specifications, you misinterpreted the information they provided, in fact none of them provided the information you claimed they do.
Although you linked to the right specifications, you misinterpreted the information they provided, in fact none of them provided the information you claimed they do.This is so true and might have happened more often than I care to admit
I think it's very clear now