Buscamos en el mundo online para así traerte la solución a tu dilema, en caso de alguna inquietud puedes dejar la inquietud y te respondemos porque estamos para servirte.
Solución:
tl; dr:
Habiendo sido preguntado en privado sobre la siguiente configuración varias veces, decidí agregar una demostración (Bootstrap 4 + jQuery + Font Awesome input-group setup):
$('.btn-plus, .btn-minus').on('click', function(e)
const isNegative = $(e.target).closest('.btn-minus').is('.btn-minus');
const input = $(e.target).closest('.input-group').find('input');
if (input.is('input'))
input[0][isNegative ? 'stepDown' : 'stepUp']()
).inline-group
max-width: 9rem;
padding: .5rem;
.inline-group .form-control
text-align: right;
.form-control[type="number"]::-webkit-inner-spin-button,
.form-control[type="number"]::-webkit-outer-spin-button
-webkit-appearance: none;
margin: 0;
respuesta larga (inicial):
El nativo input[type=number] los controles no se pueden usar en varios navegadores. La forma más fácil y segura de lograr lo que desea en varios navegadores / dispositivos es ocultarlos usando:
input[type="number"]
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button
-webkit-appearance: none;
… que le permite usar sus botones personalizados, que podrían estar vinculados para ejecutar las funciones que las flechas giratorias (flechas) harían (.stepUp() y .stepDown()), siempre que mantenga la entrada type="number".
Por ejemplo:
input[type="number"]
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button
-webkit-appearance: none;
.number-input
border: 2px solid #ddd;
display: inline-flex;
.number-input,
.number-input *
box-sizing: border-box;
.number-input button
outline:none;
-webkit-appearance: none;
background-color: transparent;
border: none;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
cursor: pointer;
margin: 0;
position: relative;
.number-input button:before,
.number-input button:after
display: inline-block;
position: absolute;
content: '';
width: 1rem;
height: 2px;
background-color: #212121;
transform: translate(-50%, -50%);
.number-input button.plus:after
transform: translate(-50%, -50%) rotate(90deg);
.number-input input[type=number]
font-family: sans-serif;
max-width: 5rem;
padding: .5rem;
border: solid #ddd;
border-width: 0 2px;
font-size: 2rem;
height: 3rem;
font-weight: bold;
text-align: center;
Nota: Para cambiar el valor de la entrada, es necesario encontrarlo. Para proporcionar flexibilidad, en el ejemplo anterior agrupé botones y el bajo un padre común y usó ese padre para encontrar el (eligiendo no depender de su proximidad u orden particular en DOM). El método anterior cambiará cualquierinput[type=number]hermano de los botones. Si eso no es conveniente, se podría usar cualquier otro método para encontrar la entrada de los botones:
- por identificación:
.querySelector('#some-id'):
- por nombre de la clase:
.querySelector('.some-class'):
También tenga en cuenta que los ejemplos anteriores solo buscan dentro del .parentNode, no en todo document, que también es posible:
es decir: onclick="document.getElementById('#some-id').stepUp()"
- por proximidad (
previousElementSibling|nextElementSibling)
- cualquier otra forma de determinar y encontrar un elemento de entrada particular en una estructura DOM. Por ejemplo, se podrían usar bibliotecas de terceros, como jQuery:
Una nota importante al usar jQuery es que el stepUp() y stepDown() Los métodos se colocan en el elemento DOM, no en el contenedor jQuery. El elemento DOM se encuentra dentro del 0 propiedad de la jQuery envoltura.
Nota sobre preventDefault(). Haciendo clic en un dentro de una