logo标签列表

如何控制input type="number"的箭头按钮大小

csshtml
7
我正在实现一个type="number"的输入组合框。
我想调整向上箭头按钮和向下箭头按钮的大小。
我认为这些按钮太小了，用户可能会感到不方便的点击动作。
我一直在通过谷歌搜索、调查属性和选择器来解决这个问题，但是我找不到任何方法，我认为这是因为数字框是HTML5最近发布的标签。
请问如何调整这个大小？请给我任何建议。谢谢。
此致敬礼， enter image description here 
<td>
<input type="number" name="qty" value="1" name="goodsnum" onChange = "qtyChanged();">
</td>
1
请粘贴此按钮的HTML。 - Yahya Hussein
2个回答
7

您可以通过 CSS 与箭头进行交互。

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

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

3
很遗憾（至少在macOS上使用Chrome浏览器时），箭头本身仍然非常小。 - casraf
在Mac ElCapitan上，Firefox（v54.0.1）中的箭头仍然非常微小。 - Ricky Dam
2
Firefox不支持这个伪元素选择器，他们的错误跟踪器上有很多问题，可以追溯到多年前，有赞成和反对的论点。这是一团糟。 - Coderer
1
要始终显示按钮（而不仅在悬停时），请添加以下代码： input[type=number]::-webkit-inner-spin-button { opacity: 1 !important; } - Entara
Firefox不支持：https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-inner-spin-button - undefined
显示剩余2条评论
0

尝试下面的代码。
我在这里找到了它：http://jqueryui.com/spinner/
来自这个相关问题：如何增加数字输入框上下箭头的大小，使用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>

试一下，告诉我进展如何，然后如果我帮到了你，请确保将其标记为正确 :) - Ricky Dam
我相信IE可以处理jQuery。如果这是你的问题。当然，这取决于你使用的IE版本。 - Ricky Dam
非常感谢您的快速评论。那么，移动端也可以吗？ - hsw4840
是的，jQuery是一种通用的JavaScript库，如果浏览器足够新并且已经导入和在桌面上运行jQuery库，它也将在移动设备上工作 :) - Ricky Dam
我如何获取本地链接中的设计演示源代码，例如<link rel="stylesheet" href="/resources/demos/style.css">？ - hsw4840
让我们在聊天中继续这个讨论：http://chat.stackoverflow.com/rooms/149535/discussion-between-ricky-dam-and-hsw4840。 - Ricky Dam
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接