Input size unresponsive

1

html<input id="resizeme" size=5 style="background-color:yellow"> ignores the size attribute. Going straight to the dom to find resizeme works fine, so do .style attributes, just not .size. Did I find a little bug?

2

Observable generally has minimal default styles, but we do have a default width of 320px applied to some inputs:

input:not([type]),
input[type=email],
input[type=number],
input[type=password],
input[type=range],
input[type=search],
input[type=tel],
input[type=text],
input[type=url] {
  width: 320px;
}

If you don’t want the width to be 320px, you can override it by setting the width back to auto:

html`<input size="5" style="width:auto;">`

Alternatively you can use the width property to set the width, rather than using size (width=5em isn’t exactly the same as size=5, but it’s close):

html`<input style="width:5em;">`
1 Like