首页 > web前端 > css教程 > 如何删除 WebKit 浏览器中的数字输入旋转按钮?

如何删除 WebKit 浏览器中的数字输入旋转按钮?

DDD
发布: 2024-11-26 14:33:10
原创
324 人浏览过

How Can I Remove Number Input Spinner Buttons in WebKit Browsers?

在 Webkit 中抑制输入类型“数字”旋转按钮

为移动(Mobile Safari)和桌面用户(Chrome)设计网站时、Safari),请考虑使用 为数字条目指定的输入字段的视觉美感。标签。在移动设备上,此标签最有利于通过数字键盘输入数字。但是,在 Chrome 和 Safari 中,这些字段旁边会出现不需要的旋转按钮,可能会与设计美观发生冲突。

使用 CSS 禁用旋转按钮

使用 CSS 消除这些按钮,利用以下代码:

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
登录后复制

此代码有效隐藏了内部和外部旋转按钮,确保干净、时尚数字输入字段的设计。此外,请记住将这些元素的边距设置为零,以防止输入字段周围出现不必要的间距。

以上是如何删除 WebKit 浏览器中的数字输入旋转按钮?的详细内容。更多信息请关注PHP中文网其他相关文章!

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