Search code examples
csshtmlformsinputopera

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


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?


Solution

  • 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