跨浏览器是否有一致的方法来隐藏某些浏览器(如Chrome)为类型编号的HTML输入呈现的新旋转框?我正在寻找一种CSS或JavaScript方法来防止上/下箭头出现.
<input id="test" type="number">
Run Code Online (Sandbox Code Playgroud) 只是想要删除这些箭头,在某些情况下方便.
我想保留浏览器对内容纯粹是数字的意识.因此将其更改input[type="text"]
为不可接受的解决方案.
现在Opera是基于webkit的,这个问题是一个愚蠢的说法:我可以隐藏HTML5数字输入的旋转框吗?
我在网页上有一个输入控件,类似于:
<input type="number" name="value" />
Run Code Online (Sandbox Code Playgroud)
如果此控件具有焦点并且我按下向上或向下箭头键,则文本框中的值递增或递减(IE中除外).我想禁用此功能,最好使用CSS.我已经使用CSS删除了微调按钮.我意识到我可以使用JavaScript来捕获keydown事件,但我想允许箭头键继续向上或向下滚动页面.
我有一些在桌面上完美运行的 HTML/CSS。
它也适用于移动设备,但输入字段上用于数字选择的向上和向下箭头不会显示,迫使用户手动“输入”数字。客户要求将这些数字旋转箭头保留在移动视图上。
有很多关于如何隐藏/禁用微调器的问题,甚至还有一些关于如何保留微调器的问题,但这些问题没有或不正确的答案,并且遵循这些答案和建议并没有解决这个问题。
@media only screen {
input[type=number] {
/* -moz-appearance: number-input; */
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: inner-spin-button;
/***
* Below tried and failed:
***/
/* -moz-appearance: number-input; */
/*-ms-appearance: inner-spin-button;*/
/*appearance: auto;*/
margin: 0;
opacity: 1;
}
#updQtyLoose47 {
/* basic styling */
background: rgba(245, 235, 170, 0.75);
border-radius: 0;
border: none;
border: solid 1px #dbdbdb;
color: inherit;
display: block;
outline: 0;
padding: 0.25rem 0 0.25rem 0.75rem;
text-decoration: none;
width: 100px; …
Run Code Online (Sandbox Code Playgroud)