に似最小 - 最大テキストボックスを作りたい
私はこのようなテキストボックスを作成したいと思います。
私はmin maxを使って試しましたが、動作しません。私は画像のようにそれを行うことができますどのように
<div>
<input type="number" name="quantity" min="1" max="5" placeholder="Number"><br>
</div>？
助けがあれば助かります。
ありがとうございます。
私はカスタムカラーを追加したこれで試してみてください、あなたはアイコンに置き換えることができ
$(function(){
\t $('#up').on('click', function(){
\t \t var value = $('#value').val();
\t \t if(value == 5){
\t \t \t return false;
\t \t }
\t \t value++;
\t \t $('#value').val(value);
\t }); \t
\t
\t $('#down').on('click', function(ev){
\t \t
\t \t var value = $('#value').val();
\t \t if(value == 0){
\t \t \t return false;
\t \t }
\t \t value--;
\t \t $('#value').val(value);
\t \t
\t }); \t
});.relative {
\t position:relative;
\t width:280px;
}
input {
\t width:100%;
\t display:inline-block;
\t border:2px solid #E5E4E4;
\t appearance:none;
\t padding:5px 0 5px 5px;
}
#up {
\t width:25px;
\t height:17px;
\t position:absolute;
\t right:0;
\t top:0;
\t background:#096;
\t border:none;
}
#down {
\t width:25px;
\t height:17px;
\t position:absolute;
\t right:0;
\t bottom:0;
\t background:#06C;
\t 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>ええ、私は矢印のスタイルを変更できますか？ –
あなたはそれを行うことができます画像で –
デフォルトのものとは異なります。 –
だけ分を削除して、最高はそれが自動的に実行されます属性... 私はあなたがこのように同じ必要があると思うしてみてください：
<div>
<input type="number" name="quantity" placeholder="Amount request (low to high) " style="width:250px;"><br>
</div>
その完璧に働いて、私のようなスタイルを作りたいいただきました！間違ってこの –
と画像に –