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

css html forms input opera
anthonyryan1 picture anthonyryan1 · Oct 28, 2012 · Viewed 248.6k times · Source

Just looking to remove these arrows, convenient in certain situations.

I would like to preserve the browser's awareness of the content being purely numeric however. So changing it to input[type="text"] is not an acceptable solution.

Now that Opera is webkit based, this question is a dulpicate of: Can I hide the HTML5 number input’s spin box?

Answer

JayD picture JayD · Mar 10, 2014

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

This tutorial from CSS Tricks explains in detail & also shows how to style them

Related questions

Put icon inside input element in a form

How do I put an icon inside a form's input element? Live version at: Tidal Force theme

Read More
Clicking the text to select corresponding radio button

I'm creating a quiz web application using PHP. Each question is comprised of a separate <label> and has 4 possible choices, using radio buttons to allow the user to select his/her answer. The current HTML for a single …

Read More
Radio Button "Checked=checked" not changing when option changed

I've created a basic 2 radio button form as seen in my example below. Observing the browser rendering, we see item 1 selected. We inspect item 1 and 2. When I click item 2, I expect item 1's checked=checked to be remove. I expect …

Read More