我有一个网站,主要是为移动用户,但桌面也.

在Mobile Safari上,使用<input type="number">非常有效,因为它会在输入字段上打开数字键盘,而输入字段应该只包含数字.

然而,在Chrome和Safari中,使用数字输入在字段右侧显示旋转按钮,这在我的设计中看起来像垃圾.我真的不需要按钮,因为不管怎样,当你需要写一个6位数的数字时,它们都是无用的.

有没有可能用-webkit-appearance或其他CSS技巧来禁用它?我试过了,运气不好.

推荐答案

下面的css适用于Chrome和Firefox

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

input[type=number] {
    -moz-appearance:textfield;
}

Html相关问答推荐

Font Awesome 6插入符号未显示

如何在angular 17.2中使用routerLink解决此错误

如何将FlexBox项目zoom 到其包含图像的大小

如何使我的组织 struct 图的连接线响应?

连续的相同 colored颜色 单元格应位于同一列、网格框中

如何仅 Select 与子代CSS类匹配的第一个元素

窗口视图之外的下拉菜单位置

在WooCommerce单一产品页面上使产品图片库粘滞(固定)

SCSS动画错误:心脏在页面刷新时启动动画,原因是:Checked和:Not(:Checked) Select 器

滚动平滑在笔记本电脑上不起作用,但在Nextjs网站的手机浏览器中起作用

如何删除FONT创建的文本下方的空格

使自定义图像滑块全宽

如何使用 Flutter 构建 Chrome 扩展?

如何根据剪辑路径边缘设置文本边距?

如何在图片前面放置下拉框?

将表格标题和过滤器调整到表格的顶部边缘

在 jinja 模板内的 html 表中嵌套 For 循环

font awesome 的 CDN/CSS 如何工作?

如何使列表的第一个元素比 css 中的其他元素大?

CSS:如何在模糊的背景上剪切文本?