Is it possible to use min, max and step in CSS?

Question

I have an input like number with a min and the max in HTML. it is possible to use this min, max and the step in the CSS?

<input class=input_number id=delai type=number min=1 max=10 step=2 name=delai required />

In CSS, something like this:

#delai{ min:1;max:10;step:2}

Answer 1

As already mentioned, CSS does not serve to define values but to define formatting, the visual aspect of the element.

You can however use Javascript for this purpose.

Example with jQuery

$(document).ready(function() {
  $("#delay").attr({
    "min": 2,
    "max": 10,
    "step": 2
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input id="delay" type="number" min="0" max="100" step="5" />

Example with Javascript

document.addEventListener('DOMContentLoaded', function() {

  var meuCampo = document.getElementById("delay");

  meuCampo.min = 2;
  meuCampo.max = 10;
  meuCampo.step = 2;

}, false);

<input id="delay" type="number" min="0" max="100" step="5" />

---

^{Note: If the idea is to define a certain CSS formatting based on the attribute value, you can see the solution in the @Iago Correia Guimarães.}

Answer 2

you cannot change the attribute value of an element with css but you can define the style of a given element by its value using the date attribute of html. Example:

<input id="delai" type="number" data-min="1" />

and in css:

#delai[data-min='1']{ seu estilo aqui }