Styling HTML5 Number Input (Spin Box) in Chrome

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

Make HTML5 number input’s spin box always visible on chrome just like mozilla?

jsFiddle

input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {opacity: 1 !important;}
<input class="FlaggingPeriodTextBox" style=" width: 61px;    text-align: right;font-family: Segoe UI;margin-top: 9px;" type="number" min="1" max="999" value="7">

Restore input type=number spinners in chrome

Set -webkit-appearance to inner-spin-button, the default value for the buttons.

input[type=number]::-webkit-outer-spin-button, 
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: inner-spin-button !important;
}

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

number input - always show spin buttons

You can target spin buttons using ::-webkit-inner/outer-spin-button and than just set opacity to 1 (spins are always there, but in default they have opacity: 0).

Code:

<style>  

input[type=number]::-webkit-inner-spin-button {
opacity: 1
}

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

Fiddle:
http://jsfiddle.net/dk8fj/

Styling input type=number/ spinner arrows the right way

Finally I found the way to make the native arrows a little bit bigger. Here is the trick:

input[type=number] {
line-height: 30px;
}

input[type=number]::-webkit-inner-spin-button {
width: 30px;
height: 30px;
}
<input type="number" />

Chrome input type=number CSS styling

I just ran into this myself. Actually, I was trying to get rid of them, however, the same rules in the the linked SO question still should apply for altering appearance as well. I found the solution in another SO question. Look at the accepted answer, it works like a charm.

Customizing Increment Arrows on Input of Type Number Using CSS

tl;dr:

Having been asked in private about the following setup quite a few times, I decided to add a demo for it (Bootstrap 4 + jQuery + Font Awesome input-group setup):

$('.btn-plus, .btn-minus').on('click', function(e) {  const isNegative = $(e.target).closest('.btn-minus').is('.btn-minus');  const input = $(e.target).closest('.input-group').find('input');  if (input.is('input')) {    input[0][isNegative ? 'stepDown' : 'stepUp']()  }})
.inline-group {  max-width: 9rem;  padding: .5rem;}
.inline-group .form-control { text-align: right;}
.form-control[type="number"]::-webkit-inner-spin-button,.form-control[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0;}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" /><link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /><script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script><script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="input-group inline-group"> <div class="input-group-prepend"> <button class="btn btn-outline-secondary btn-minus"> <i class="fa fa-minus"></i> </button> </div> <input class="form-control quantity" min="0" name="quantity" value="1" type="number"> <div class="input-group-append"> <button class="btn btn-outline-secondary btn-plus"> <i class="fa fa-plus"></i> </button> </div></div>

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


Related Topics



Leave a reply



Submit