Remove arrows in type number field

Asked

Viewed 12,106 times

7

Colleagues.

I’m using the code below for when the user access by smartphone, appear the number pad:

<input type="number" value="" class="form-control">

But on the desktop, when we click inside the field, arrows appear:

inserir a descrição da imagem aqui

How would you optimize and remove these arrows? Would you have any other solution?

html5

2 answers

11


based on this :question, you can use the property -Moz-Appearance, which is used to display an element using the native platform style based on the operating system theme.

input[type=number]::-webkit-inner-spin-button { 
    -webkit-appearance: none;
    
}
input[type=number] { 
   -moz-appearance: textfield;
   appearance: textfield;

}

 
<input type="number" />

  • Works in all browsers?

  • 2

    No, hard something that works on "all" the browsers....

  • I referred to the better known as Chrome, firefox or opera.

  • 1

    Um, yes with the issue yes....

  • I tested this code here and it didn’t work, I use the bootstrap.

  • What didn’t work? @Viniciusaquino

  • Opaa, I put this code in my style sheet and the input type number in my form and the arrows continue to appear

  • try to put inline inside the input... using style=""

  • Now it’s gone, thank you!

Show 4 more comments

-1

add this command to your css

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

Browser other questions tagged html5

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