How to Hide the Html5 Number Input'S Spin Box

Can I hide the HTML5 number input’s spin box?

This CSS effectively hides the spin-button for webkit browsers (have tested it in Chrome 7.0.517.44 and Safari Version 5.0.2 (6533.18.5)):

input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {    /* display: none; <- Crashes Chrome on hover */    -webkit-appearance: none;    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */}
input[type=number] {    -moz-appearance:textfield; /* Firefox */}

<input type="number" step="0.01" />

Hide HTML5 input type number arrow with a css class?

Answer

.no-spin::-webkit-inner-spin-button, .no-spin::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.no-spin {
    -moz-appearance:textfield !important;
}

<input type="number" class="no-spin"/>

input type number hide arrows from right part of input

Just add some class to distinguish inputs:

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

First number: <input type="number" class="no-spinner"><br>Second number: <input type="number"><br>

Disable webkit's spin buttons on input type=number?

The below css works for both Chrome and Firefox

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

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

Hide Up & Down Arrow Buttons (Spinner) in Input Number - Firefox 29

According to this blog post, you need to set -moz-appearance:textfield; on the input.

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

<input type="number" step="0.01"/>

How to remove the arrows from input[type=number] in Opera

I've been using some simple CSS and it seems to remove them and work fine.

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" step="0.01"/>

Is there a way to hide the new HTML5 spinbox controls shown in Google Chrome & Opera?

At the moment, the answer is no - as far as I know anyway.

The HTML5 spec generally doesn't want to dictate what the user interface should look like, this also applies to the input type=number feature. I think there is a sort of implicitly expected workflow which goes somewhat like

input from authors/browser vendors/interesting people > spec text in HTML spec > implementations (experimenting with UI) > UI conventions (experimenting with styling) > CSS proposals > CSS spec for how to style the new controls.

Hence, real control over the rendering of the new inputs won't be possible in the near future. Of course, browsers may meanwhile implement experimental vendor-specific CSS extensions..