Take input arrows type number without Bootstrap

Asked

Viewed 461 times

0

I looked for a question that would help me, but she taught me how to get the arrows out of the input with Bootstrap. I’d like to know how to get them out without Bootstrap.

<input type="number" name="txt_mas" id="txt_mas" class="ent_estilo">
html5
  • 1

    Related: https://answall.com/questions/336061/stilizar-um-input-type-number-para-trocar-as-arrows/

2 answers

1


I think the easiest way would be to add this to your css style sheet.

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

Will solve!

0

It’s quite simple, just add this css code: 

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0; /* <-- Aparentemente, algumas margens ainda estão lá, apesar de estar ocultas */
}

Additional settings in firefox to work properly: 

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

Before

Antes

Afterward

Depois

Credits for Sanjib Debnath answered at stackoverflow in English, response link: https://stackoverflow.com/questions/3790935/can-i-hide-the-html5-number-input-s-spin-box

Browser other questions tagged html5

You are not signed in. Login or sign up in order to post.