想要制作像图像中那样的最小 - 最大文本框

Question

如图所示，

我想像这样制作文本框。

我已经尝试使用min max，但它无效。

<div>
  <input type="number" name="quantity" min="1" max="5" placeholder="Number"><br>

  </div>

我怎样才能像在图像中那样制作它？

任何帮助都会很棒。

谢谢。

Answer 1

试试这个我添加了自定义颜色，你可以用图标替换它

＆＃13;

＆＃13;

$(function(){
	$('#up').on('click', function(){
		var value = $('#value').val();
		if(value == 5){
			return false;
		}
		value++;
		$('#value').val(value);
	});	
	
	$('#down').on('click', function(ev){
		
		var value = $('#value').val();
		if(value == 0){
			return false;
		}
		value--;
		$('#value').val(value);
		
	});	
}); 

＆＃13;

.relative {
	position:relative;
	width:280px;
}
input {
	width:100%;
	display:inline-block;
	border:2px solid #E5E4E4;
	appearance:none;
	padding:5px 0 5px 5px;
}
#up {
	width:25px;
	height:17px;
	position:absolute;
	right:0;
	top:0;
	background:#096;
	border:none;
}
#down {
	width:25px;
	height:17px;
	position:absolute;
	right:0;
	bottom:0;
	background:#06C;
	border:none;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0; 
}
input[type=number] {
-moz-appearance:textfield;
}

＆＃13;

<div class="relative">
  <input type="number" name="quantity" id="value" placeholder="Amount Request (low to heigh)">
  <button id="up"></button>
  <button id="down"></button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需删除它将自动运行的min和max属性。 请尝试我认为你需要这样：

<div>
  <input type="number" name="quantity" placeholder="Amount request (low to high) " style="width:250px;"><br>
</div>