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

Question

如图所示，

我想把文本框做成这样。

我尝试过使用 min max 但它不起作用。

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

  </div>

我怎样才能让它像图片中那样？

任何帮助都会很棒。

谢谢。

Answer 1

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

$(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);
		
	});	
}); 

.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;
}

<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>