Do You Know How TO Hide and display Arrows From Input Number? | How to style input number Field in Form?

In this post we are learning following things:

1. Hide Arrows From Input Number Field

2. Display Arrows From Input Number Field

3. Input Number Field Custom Design

Do You Know How TO Hide and display Arrows From Input Number? | How to style input number Field in Form?

Hide Arrows From Input Number Field

I've been using some simple CSS, which help to hide arrows from input number field.

मैं कुछ सरल सीएसएस का उपयोग कर रहा हूं, जो इनपुट नंबर फ़ील्ड से arrows को छिपाने में मदद करता है।

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}

Display Arrows From Input Number Field

I've been using some simple CSS, which help to display arrows from input number field.

मैं कुछ सरल सीएसएस का उपयोग कर रहा हूं, जो इनपुट नंबर फ़ील्ड से तीर प्रदर्शित करने में मदद करता है।

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

Input Number Field Custom Design

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.quantity {
position: relative;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button
{
-webkit-appearance: none;
margin: 0;
}

input[type=number]
{
-moz-appearance: textfield;
}

.quantity input {
width: 45px;
height: 42px;
line-height: 1.65;
float: left;
display: block;
padding: 0;
margin: 0;
padding-left: 7px;
border: 1px solid #eee;
}

.quantity input:focus {
outline: 0;
}

.quantity-nav {
float: left;
position: relative;
height: 42px;
}

.quantity-button {
position: relative;
cursor: pointer;
border-left: 1px solid #eee;
width: 20px;
text-align: center;
color: #333;
font-size: 13px;
font-family: "Trebuchet MS", Helvetica, sans-serif !important;
line-height: 1.7;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}

.quantity-button.quantity-up {
position: absolute;
height: 50%;
top: 0;
border-bottom: 1px solid #eee;
}

.quantity-button.quantity-down {
position: absolute;
bottom: -1px;
height: 50%;
}
</style>
</head>
<body>
<div class="quantity">
<input type="number" min="1" max="9" step="1" value="1">
</div>
</body>
<script>
jQuery('<div class="quantity-nav"><div class="quantity-button quantity-up">+</div><div class="quantity-button quantity-down">-</div></div>').insertAfter('.quantity input');
jQuery('.quantity').each(function() {
var spinner = jQuery(this),
input = spinner.find('input[type="number"]'),
btnUp = spinner.find('.quantity-up'),
btnDown = spinner.find('.quantity-down'),
min = input.attr('min'),
max = input.attr('max');

btnUp.click(function() {
var oldValue = parseFloat(input.val());
if (oldValue >= max) {
var newVal = oldValue;
} else {
var newVal = oldValue + 1;
}
spinner.find("input").val(newVal);
spinner.find("input").trigger("change");
});

btnDown.click(function() {
var oldValue = parseFloat(input.val());
if (oldValue <= min) {
var newVal = oldValue;
} else {
var newVal = oldValue - 1;
}
spinner.find("input").val(newVal);
spinner.find("input").trigger("change");
});

});
</script>
</html>