0

I would like to make a custom min-max input in CSS3.

Here is the image

<input type="number" min="10" class="form-control" value="10">

Any help would be great.

Thank you.

  • why not just add the max attribute to the input or am I missing what you are after? – Pete Jan 19 '17 at 11:02
  • i just want to add up and down arrow design.. i dont know how to customize it? –  Jan 19 '17 at 11:04
  • 2
    Possible duplicate: http://stackoverflow.com/questions/24537234/customize-appearance-of-up-down-arrows-in-html-number-inputs – sol Jan 19 '17 at 11:06
  • Possible duplicate of [Customize appearance of up/down arrows in HTML number inputs](http://stackoverflow.com/questions/24537234/customize-appearance-of-up-down-arrows-in-html-number-inputs) – Andrew Stalker Jan 19 '17 at 12:48

1 Answers1

0

I am not sure at all what you are looking for.

If you are looking for the possibility of creating your own arrows to count up or down your input field, here you have alternative solution:

HTML:

<input class="number" type="number" min="10" class="form-control" value="10">
<button class="number_up"/>+</button>
<button class="number_down">-</button>

JS/jQuery

$(".number_up").click(function() {
  $(".number").val(parseInt($(".number").val()) + 1);
});

$(".number_down").click(function() {
  $(".number").val(parseInt($(".number").val()) - 1);
});

A demo for you is findable here: http://codepen.io/derbronko/pen/YNNRoL

Attention! This code is currently not taking not about the min/max/step-parameters!

It´s done with jQuery, a function-library for JavaScript. Just to do it with CSS is not possible in my opinion. If you need a more detailed explanation, let me know. ;-)

derbronko
  • 16
  • 4