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
CSS Spread <Li> Horizontally Across <Ul>
Does Chrome Have Issue with Setting A:Visited CSS Properties
Set Div Height Equal to Screen Size
Using Background-Attachment:Fixed in Safari on The Ipad
Confusion as to How Clearfix Actually Works
Stretch Horizontal Ul to Fit Width of Div
HTML5 Image Icon to Input Placeholder
Checking Hardware Acceleration Availability? (Testing Available)
How to Style the Default Wordpress Audio Player with CSS
CSS 2, Precedence of Stylesheets Imported Using Link Element
CSS Inverted Trapezium When Width Will Differ
Access the Locale in Ruby in CSS Files
Change the Color of Mui Autocomplete Option
Set Width of Ng-Multiselect-Dropdown
CSS Menu Hover "Hangs" in Chrome & Safari
Webgrease Error on Styles.Render Call in _Layout.Cshtml in MVC4