root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 11 Packages Projects Releases Wiki Activity

Adds a new utility class .no-spinners to remove spinners 

from number inputs. Includes visual test in tests/visual/no-spinners.html

and documentation in docs/5.3/utilities/misc.md.
This commit is contained in:
daniel.secco 2025-04-09 11:08:01 -03:00
parent 15be2585fa
commit 4d263ee422
5 changed files with 42 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
scss/_helpers.scss
View File

@ -10,3 +10,4 @@
@import "helpers/stretched-link";
@import "helpers/text-truncation";
@import "helpers/vr";
@import "helpers/no-spinners";

12
scss/helpers/_no-spinners.scss Normal file
View File

@ -0,0 +1,12 @@
// scss/utilities/_no-spinners.scss
.no-spinners {
&::-webkit-inner-spin-button,
&::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
-moz-appearance: textfield;
}

15
site/content/docs/5.3/helpers/no-spinners.md Normal file
View File

@ -0,0 +1,15 @@
---
layout: docs
title: No Spinners
description: Utility classes that removes the spinner arrows from INPUT.
group: helpers
---
## No Spinners
The `.no-spinners` utility removes the spinner arrows from `<input type="number">` and similar elements in supported browsers (WebKit and Firefox).
Use in HTML:
```html
<input type="number" class="form-control no-spinners" value="42">

6
site/content/docs/5.3/utilities/no-spinners.md
View File

@ -1,6 +0,0 @@
### No Spinners
The `.no-spinners` utility removes the spinner arrows from `<input type="number">` and similar elements across supported browsers (WebKit and Firefox).
```html
<input type="number" class="form-control no-spinners" value="42">

29
tests/visual/no-spinners.html
View File

@ -4,21 +4,20 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Visual Test: No Spinners Utility</title>
<link rel="stylesheet" href="/dist/css/bootstrap.css">
</head>
<body>
<div class="container py-5">
<h1>No Spinners Utility Test</h1>
<p>Inputs below should not display spinners in supported browsers.</p>
<link rel="stylesheet" href="https://getbootstrap.com/docs/5.3/dist/css/bootstrap.min.css">
<style>
.no-spinners::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
<h2>Default Number Input (with spinners)</h2>
<input type="number" class="form-control" value="42">
.no-spinners::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
<h2>Number Input with .no-spinners</h2>
<input type="number" class="form-control no-spinners" value="42">
<h2>Time Input with .no-spinners</h2>
<input type="time" class="form-control no-spinners" value="13:37">
</div>
</body>
.no-spinners {
-moz-appearance: textfield;
}
</style>
</html>