Geek Answers Handbook

How to limit input text length using CSS3?

Possible duplicate:
Is it possible to specify maxlength in css?

In my CSS, I use this code to make round borders for all input tags on my site. I wonder if it is possible to limit the input length in the same way (e.g. 50 characters)

input { border-radius: 10px; -moz-border-radius: 10px; -khtml-border-radius: 10px; -webkit-border-radius: 10px; }

I present something like this (this does not work):

 input { max-lenght: 50; }

Any suggestions? Thank you very much!

EDIT: this question is about how many characters the user can write in the field, not the apparent size of the input

+6
source share
3 answers

You cannot use CSS to limit the number of characters you enter. This would be a functional limitation, and CSS a presentation.

+13
source

I would handle the character limit in the html input field. eg.

 <input type="text" id="textbox" name="textbox" maxlength="50" />
+11
source

Update:

You can use only jQuery.

 $(document).ready(function () { $("input").attr('maxlength', '5'); });

If you really need an automatic method, you can use a combination of css and javascript.

Javascript / jquery

 $(document).ready(function () { // Get all the elements with class inputMaxLength and add maxlength attribute to them $(".inputMaxLength").attr('maxlength', '5'); });

CSS

 .inputMaxLength { }

HTML

 <input type="text" id="textbox" class="inputMaxLength" name="textbox" />

A bit of a hack, but it works. As far as I know, there is no css solution.

+1
source

More articles:


All Articles