Good afternoon. I'm doing an activity in college, where I need to limit a text field to 100 characters, but I have to use only CSS for this.
I've tried these two ways:
Example 1:
.es1[type="text"]{
background-color: rgb(173,234,234);
font-weight: bolder;
width: 20ch;
Example 2:
.es1[type="text"]{
background-color: rgb(173,234,234);
font-weight: bolder;
max-width: 20ch;
But I could not. Thanks in advance.)
If it is to limit the number of characters within the input you can use maxlength="100" and to visually contain exactly 100 characters inside you can put width: 100ch
In this example you can see, I have limited it by 10 characters just like the width in 10ch to get just 10 characters wide in input . But read the note below.
.es1[type="text"]{
width: 10ch; /* largura equivalente a 10 letras (10ch) */
background-color: rgb(173,234,234);
font-weight: bolder;
}<!-- o campo só deixa digitar 10 caracteres como o maxlength -->
<input class="es1" type="text" value="1234567890" maxlength="10">
<input class="es1" type="text" value="mmmmm" maxlength="10">OBS:
According to the Mozilla documentation link
CH Represents the width, or more precisely the advanced measure, of glyph "0" (zero, Unicode character U + 0030) in the element.
Browser support on input drive: link
Good afternoon, my friend;
I always use direct in html maxlength
You get this, and you can use both the input and the textarea: