How to Specify Maxlength in CSS

Can I specify maxlength in css?

No. This needs to be done in the HTML. You could set the value with Javascript if you need to though.

CSS max length in input type styling

Just a rough idea but with the following code you could achieve a similar layout to the one you have posted above.

label {  display: inline-block;  border-bottom: 1px solid black;}
input {  border: none;  padding: 10px 0;  outline: none;}
span {  color: rgba(0, 0, 0, 0.5);  font-size: 12px;}

<label>  Description  <div id="wrapper">    <input type="text" placeholder="This is the description"/>    <span>(100 char. max)</span>  </div></label>

How to limit input text length using CSS3?

You cannot use CSS to limit the number of input characters. That would be a functional restriction, and CSS deals with presentation.

How to add styles to an input element when maxlength is reached?

Probably not in this decade. This is a long shot. But it may leave the door open to what you are asking.

The wording of this section is quite ambiguous. If the current selected input could be in "some way" considered a highlight element and you created a custom pseudo-element for length = maxlength.

"Currently no way to distinguish..." says maybe there will be some changes in what is a highlight element.

It is the Last Line in this section that leaves the door open.

CSS Pseudo-Elements Module Level 4

3.1. Selecting Highlighted Content:

The highlight pseudo-elements represent portions of a document that have been highlighted in some way.

::selection
The ::selection pseudo-element represents the portion of a document that has been highlighted by the user. This also applies, for example, to selected text within an editable text field.

Active vs. inactive selections are often styled differently. Currently no way to distinguish.

::spelling-error
The ::spelling-error pseudo-element represents a portion of text that has been flagged by the user agent as misspelled.
::grammar-error
The ::grammar-error pseudo-element represents a portion of text that has been flagged by the user agent as grammatically incorrect.

Note: A future level of CSS may introduce ways to create custom highlight pseudo-elements.

How can I set max-length in an HTML5 input type=number element?

And you can add a max attribute that will specify the highest possible number that you may insert

<input type="number" max="999" />

if you add both a max and a min value you can specify the range of allowed values:

<input type="number" min="1" max="999" />

The above will still not stop a user from manually entering a value outside of the specified range. Instead he will be displayed a popup telling him to enter a value within this range upon submitting the form as shown in this screenshot:

How to set max length in text

Javascript way

Check this answer smart way to shorten long strings with javascript

PHP way

I use this php helper function before sending text to browser:

function readMoreHelper($story_desc, $chars = 100) {
  if (strlen($story_desc) <= $chars)
    return $story_desc;
  $story_desc = substr($story_desc,0,$chars);
  $story_desc = substr($story_desc,0,strrpos($story_desc,' '));
  $story_desc = $story_desc." ...";
  return $story_desc;
}

So, in your handler you could pass your text as below

readMoreHelper($yourLongText, 200)

---

Related Topics