Simplifying the spinner buttons

The default spin buttons implemented in the spinner widget might be a bit much, depending on context. For example, you can clearly see that these are button widgets added to the slider as subcomponents. And this works perfectly when we get to build larger widgets out of smaller ones. This is more along the lines of an aesthetic preference. Maybe the spinner would look better if the individual up and down spin buttons didn't have a hover state, and didn't have a background or border, either for that matter. Let's try taking these style properties away from the buttons in the slider and make them appear more tightly integrated.

How to do it...

Here is the basic HTML structure used as the foundation of our spinner widget:

<div class="spinner-container">
    <input id="spin" />
</div>

And here is the CSS we'll use to remove the button styles we're no longer interested in:

.ui-spinner-basic > a.ui-button {
    border: none;
    background: none...