Set min/max value for input field with CSS

May 5, 2022

Is there a way to set the min/max values of a HTML input form based on the ID with CSS?

>Solution :

You can do this by getting the input’s DOM node:
Every time the input loses focus, determine whether the value is within the range you specified, if not, correct it and prompt

function change(){
        const searchBox = document.getElementById("myInput");
       if(searchBox.value>100){
      searchBox.value=100
      alert("the max value is 100")
      }
      if(searchBox.value<0){
        searchBox.value=0
        alert("the min value is 0")
      }
    }

<input type="text" value="" id="myInput" onBlur="change">

If you want to change the style by changing the ID:
Then you can first get his DOM through class, and then you can forcefully modify his id according to DOM.id

But it is not recommended to do so