CODEWITHSUNDEEP
csshtml
hsw4840
hsw4840

Reputation: 231

How to control the size of input type="number" arrow buttons

I'm implementing an input combo box of type="number".

I want to adjust the size of the up-arrow button and bottom-arrow button.

I think that these buttons are so small buttons that users may feel an inconvenient click motion.

I've been trying to fix this by Googling, investigating properties and selectors of this, but I couldn't get any methods, and I expect that this is because number box has been recently released tag of HTML5.

How Can I adjust this size? please give me any idea. please.

Regards,

enter image description here

<td>
<input type="number" name="qty" value="1" name="goodsnum" onChange = "qtyChanged();">
</td>

Upvotes: 7

Views: 14338

Answers (2)

Ricky Dam
Ricky Dam

Reputation: 1895

Try this below.
I found it here: http://jqueryui.com/spinner/
From this related question: Increase the size of the down and up arrow on the number input, CSS, HTML

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

  $( "#disable" ).on( "click", function() {
    if ( spinner.spinner( "option", "disabled" ) ) {
      spinner.spinner( "enable" );
    } else {
      spinner.spinner( "disable" );
    }
  });
  $( "#destroy" ).on( "click", function() {
    if ( spinner.spinner( "instance" ) ) {
      spinner.spinner( "destroy" );
    } else {
      spinner.spinner();
    }
  });
  $( "#getvalue" ).on( "click", function() {
    alert( spinner.spinner( "value" ) );
  });
  $( "#setvalue" ).on( "click", function() {
    spinner.spinner( "value", 5 );
  });

  $( "button" ).button();
} );
.ui-button.ui-widget.ui-spinner-button.ui-spinner-up {
  width: 40px;
  height: 30px;
  border: 1px solid black;
}

.ui-button.ui-widget.ui-spinner-button.ui-spinner-down {
  width: 40px;
  height: 30px;
  border: 1px solid black;
}

input {
  height: 45px;
}
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Spinner - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/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>
  <script src="/resources/demos/external/jquery-mousewheel/jquery.mousewheel.js"></script>
</head>
 
<p>
  <label for="spinner">Select a value:</label>
  <input id="spinner" name="value">
</p>

Upvotes: 1

Abdullah Danyal
Abdullah Danyal

Reputation: 1146

You can interact with arrows by css.

input[type=number] {
    height: 30px;
}

input[type=number]:hover::-webkit-inner-spin-button {  
    width: 14px;
    height: 30px;
}
<input type="number" value="0" >

Upvotes: 6

Related Questions