-1

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

sirokinl
  • 51
  • 6
  • 2
    CSS can not change HTML attributes, because it's solely purpose is to style elements. Use JS for that – Justinas May 05 '22 at 08:08
  • If unable to alter the markup, the closest you can get is styling the input red/with an error icon when outside your preferred range – Zach Jensz May 05 '22 at 08:10
  • Why not [this way?](https://stackoverflow.com/a/26020780) Remember, CSS only! – zipzit May 05 '22 at 08:15

2 Answers2

-1

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

ConstFiv
  • 67
  • 6
-1

If your input type is of number you can set it directly using as such.

<input type="number" id="quantity" name="quantity" min="1" max="5">

You can also refer to this documentation from mdn listing where it can be applied. Its almost the same for max to

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/min https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/max

innocent
  • 864
  • 6
  • 17