Once I implemented a very basic version of the jQuery UI Spinner Widget, I encountered an issue where the up and down arrow buttons were not displaying. Clicking on the area where the buttons should be triggered the Spinner events and the number incremented/decremented, but the buttons themselves were invisible.
Searching through various questions on Stack Overflow (some more here and others less here), as well as a thread on the jQuery Forums (here), I came across some suggestions that there might be conflicts with Bootstrap.
In my project, I am using both Bootstrap and jQuery (UI).
Here is a snippet of the HTML I used:
<input id="spinner" name="spinner">
And the corresponding JavaScript:
$( "#spinner" ).spinner({
min: 0,
step: 100000,
});
Although I had some custom CSS in addition to the code above, it was nothing too complex.
Trying to style the buttons using the provided jQuery UI CSS classes did not resolve the issue. Even when I attempted something like:
.ui-spinner-button {
color: white !important;
background: black;
}
The background of the buttons did change to black, but the arrows remained invisible.