Question

我实现了一个输入组合框，类型为=＆＃34; number＆＃34;。

我想调整向上箭头按钮和向下箭头按钮的大小。

我认为这些按钮是如此小的按钮，用户可能会觉得不方便点击动作。

我一直试图通过谷歌搜索，调查这个属性和选择器，但我无法获得任何方法，我希望这是因为数字框最近已经发布了HTML5的标签

如何调整此尺寸？请给我任何想法。请。

问候，

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

Answer 1

您可以通过css与箭头互动。

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

<input type="number" value="0" >

Answer 2

请尝试以下方法。
我在这里找到了它：http://jqueryui.com/spinner/
从这个相关问题：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>

如何控制输入类型的大小=＆＃34;数字＆＃34;箭头按钮

2 个答案: