Decrease size of Spinner

Asked

Viewed 189 times

0

I’m trying to use jquery’s Spinner, which by default has 8 fields, and is too big for my goal, which in case would be 2 fields. I already took a look at your documentation, but the most I could was to decrease your source, as an example below:

<input readonly id="spinner" name="value">

<style>
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
    font-size: small;
    maxlength: 3;
    outline: 1px; /* add this bit */
    border: 1px inset;
}
</style>

It is possible to make this customization?

jquery html css

1 answer

1


Yes. You can do something like this:

<input id="spinner" name="value" max="99"></input>

With a max="99" you limit 99 as many as possible, and so only goes up to two digits. You can also use min="0", if you don’t want negative numbers. Then just decrease the input width.

Follows Example:

$(function() {
  var spinner = $("#spinner").spinner();

  $("button").button();
});
#spinner {
  width: 20px;
}
<head>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<p>
  <input id="spinner" name="value" min="0" max="99">
</p>

Browser other questions tagged jquery html css

You are not signed in. Login or sign up in order to post.