How to Remove The Arrows from Input[Type="Number"] in Opera

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"/>

Hide/Remove input number arrows in Opera

The term -webkit defines that it'll be applicable for browsers which use webkit engine. Opera has been using its own engine Presto for quite sometime and has recently started progress towards using chromium engine.

For the CSS to be compatible in Opera, you'd need to use -o instead.

input::-o-outer-spin-button,
input::-o-inner-spin-button {
    -o-appearance: none;
    margin: 0;
}

---

EDIT

On further searching on Opera community, this particular thread seems to be exactly the same and quoting the reply from there:

Opera does not support styling the shadow DOM at the moment, so you
can't.

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"/>

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" />

Styling an input type=number

UPDATE 17/03/2017

Original solution won't work anymore. The spinners are part of shadow dom. For now just to hide in chrome use:

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

<input type="number" />

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>

How can I add padding-right to an input type=number when aligning right?

Rather than using padding-right use the following CSS

input::-webkit-outer-spin-button, 
input::-webkit-inner-spin-button { margin-left: 20px; } 

and for Firefox above solution won't work, so the best solution is just to hide it :

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

or you can try to "play" with some jquery plugin.

How to get rid of or remove spinners/arrows in react-select?

I believe you're setting the type=number for the input element somewhere. In order to remove the up/down arrow. you can use the css code from this tutorial.

You can also see all of the input types and how it's rendered out-of-the-box here.

/* 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;
}

Live Demo

Hiding arrow from date input

You can try this:

input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

Or you can include a class in HTML for example .remove--arrow and try this:

.remove--arrow {
    -webkit-appearance: none;
}
.remove--arrow::-webkit-inner-spin-button,
.remove--arrow::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

How can I set max-length in an HTML5 input type=number element?

And you can add a max attribute that will specify the highest possible number that you may insert

<input type="number" max="999" />

if you add both a max and a min value you can specify the range of allowed values:

<input type="number" min="1" max="999" />

The above will still not stop a user from manually entering a value outside of the specified range. Instead he will be displayed a popup telling him to enter a value within this range upon submitting the form as shown in this screenshot:

---

Related Topics