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

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

Patricia Arquette
发布: 2024-10-26 18:12:30
原创
824 人浏览过

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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板