首页  >  文章  >  web前端  >  如何强制数字输入字段的向上/向下按钮在所有浏览器中可见?

如何强制数字输入字段的向上/向下按钮在所有浏览器中可见?

Patricia Arquette
Patricia Arquette原创
2024-10-26 18:12:30728浏览

How Can I Force Visibility of Up/Down Buttons for Number Input Fields in All Browsers?

您可以强制数字输入字段的向上/向下按钮可见吗?

想要在数字上始终存在向上和向下箭头输入字段?你可能遇到了一些障碍;这是一个解决方案:

HTML:

<code class="html"><input type="number" /></code>

CSS:

<code class="css">input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: "Always Show Up/Down Arrows";
}</code>

不幸的是,这种方法是有限的

替代解决方案:不透明度属性

对于跨浏览器解决方案,请尝试以下操作:

<code class="css">input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  opacity: 1;
}</code>

此方法强制箭头保持可见,但请注意,它可能不适用于所有浏览器。考虑为不兼容的浏览器实施后备。

以上是如何强制数字输入字段的向上/向下按钮在所有浏览器中可见?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn