How to automatically set the text box to uppercase with CSS?

Spread the love

Sometimes, we want to automatically set the text box to uppercase with CSS.

In this article, we’ll look at how to automatically set the text box to uppercase with CSS.

How to automatically set the text box to uppercase with CSS?

To automatically set the text box to uppercase with CSS, we use the text-transform property.

For instance, we write

<input
  type="text"
  id="name-input"
  placeholder="Enter symbol"
  required="required"
/>

to add an input.

Then we write

#name-input:valid {
  text-transform: uppercase;
}

to use text-transform: uppercase; to make the input value show as upper case.

Conclusion

To automatically set the text box to uppercase with CSS, we use the text-transform property.

Leave a Reply

Your email address will not be published. Required fields are marked *