Add no-spinners utility to remove input spinners

seccofs · seccofs · commit b78ea14b584c · 2025-04-07T14:33:28.000-03:00
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. Implemented via

a separate _no-spinners.scss file due to utilities API limitations

with pseudo-elements like ::-webkit-inner-spin-button.
diff --git a/site/content/docs/5.3/utilities/no-spinners.md b/site/content/docs/5.3/utilities/no-spinners.md
@@ -0,0 +1,6 @@
+### 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">
diff --git a/tests/visual/no-spinners.html b/tests/visual/no-spinners.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <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>
+
+    <h2>Default Number Input (with spinners)</h2>
+    <input type="number" class="form-control" value="42">
+
+    <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>
+</html>
