How to Limit the Number of Characters in an Input Number Without JavaScript

Source: jejaknesia.com

www.jejaknesia.com - Have you ever created an HTML form and found users entering numbers beyond the desired limit — for example, entering an age “999” or a value “-10”? This issue often occurs when using the <input type="number"> tag without additional controls.

The good news is, you don’t always need JavaScript to fix it. With a touch of smart CSS, you can restrict number input values and provide automatic visual warnings.

In this article, we’ll discuss a practical way to limit the number of digits in an input number using only the min, max, and pseudo-class :out-of-range properties. No lengthy JavaScript needed — just one line of CSS for a professional result!

Understanding Input Number in HTML

The <input type="number"> element is used to receive numeric input from users. Typically, we add attributes such as:

• min — the minimum value users can enter.
• max — the maximum value allowed.
• step — defines the increment or decrement steps for the number.

Example:

<input type="number" min="1" max="100" step="1">

With these attributes, the browser already applies a basic restriction. However, users can still type values outside the range — they’re just considered “invalid”.

This is where the CSS :out-of-range comes into play.

What is the :out-of-range Pseudo-Class?

The :out-of-range pseudo-class is a CSS feature that automatically activates when an input value doesn’t meet the defined min and max range. With this, you can apply visual effects — for example, a red border or different background — without writing any JavaScript.

Conversely, there’s also :in-range to mark values that are still valid.

How to Limit Input Number Using CSS

Here’s the simplest and most effective example:

input:out-of-range {
  border: 2px solid red;
}
input:in-range {
  border: 2px solid green;
}

<label>Enter age (18 - 60):</label>
<input type="number" min="18" max="60" placeholder="Example: 25">

With the code above:

• If a user types 17 → the border automatically turns red (because it’s out of range).
• If a user types 25 → the border turns green (because it’s valid).

The browser immediately marks the input without needing any additional scripts.

Demo

Comparison with Using JavaScript

If you use JavaScript, the code typically looks like this:

<input type="number" id="umur" min="18" max="60">

  const umur = document.getElementById('umur');
  umur.addEventListener('input', function() {
    if (this.value < 18 || this.value > 60) {
      this.style.border = "2px solid red";
    } else {
      this.style.border = "2px solid green";
    }
  });

Both approaches work the same, but the CSS method is much lighter, easier to maintain, and free from JavaScript. However, if you need complex validation logic (for example, auto-calculating age or showing dynamic messages), then JavaScript becomes necessary.

Demo

Advantages of Using :out-of-range

• No JavaScript — with just CSS, your site’s performance becomes faster.
• Instant visual feedback — users immediately know if their input is invalid before submitting.
• High compatibility — supported by all modern browsers.
• Easy to implement — only requires min and max attributes.

Professional Tips for Web Designers

To make it look more attractive, you can add a smooth transition when the input state changes:

input {
  transition: all 0.3s ease;
}

Or add a subtle warning message using title:

<input type="number" min="10" max="50" title="Enter a number between 10 and 50">

Limiting the number of characters or values in an input number can actually be done very easily. With just one line of CSS using the :out-of-range pseudo-class, you can make your form more interactive, professional, and secure — without additional JavaScript.

This approach is ideal for:

• Online registration forms
• Exam score or rating forms
• Census data input
• Age validation forms

The simpler your code, the faster and more efficient your website will be. So, never underestimate the power of a single line of CSS — sometimes the best solutions are the simplest ones.