Menu
How would I create an HTML text box that exactly 3 characters can fit into it?
I found this online: <input type="text" style="width: 10px; padding: 2px; border: 1px solid black"/>
It creates a text box with width of 10px. I could use this but I was wondering if we could explicitely set for 3 chars width instead of "playing" with pixels,
591
1. Set width in HTML. In HTML, you can use the width attribute to set the width of an element. Alternatively, you can also use the size attribute to define the width of the <input> .
Definition and UsageThe width attribute specifies the width of the <input> element. Note: The width attribute is used only with <input type="image"> . Tip: Always specify both the height and width attributes for images. If height and width are set, the space required for the image is reserved when the page is loaded.
Input value length You can specify a minimum length (in characters) for the entered value using the minlength attribute; similarly, use maxlength to set the maximum length of the entered value, in characters. The example below requires that the entered value be 4–8 characters in length.
Use the span. text to fit width of text, and let the input have same size with it by position: absolute to the container.
Use the ch metric.
width: 3ch;
Make sure your box-sizing property is set to content-box if you're changing left and/or right padding.
162
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
