input number去掉上下箭头
时间: 2023-04-24 16:06:35 浏览: 137
可以使用 CSS 来隐藏上下箭头,示例代码如下:
```css
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
```
这段代码将适用于 Chrome 浏览器中的 input[type="number"] 元素,并隐藏它们的上下箭头。
如果需要在所有浏览器中隐藏,可以使用类似的代码,如:
```css
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-moz-inner-spin-button,
input[type="number"]::-moz-outer-spin-button {
-webkit-appearance: none;
-moz-appearance:none;
margin: 0;
}
```
这段代码将同时适用于 Chrome 和 Firefox 浏览器中的 input[type="number"] 元素,并隐藏它们的上下箭头。
相关问题
el-input:number去掉上下箭头
要去掉el-input中type为number的输入框的上下箭头,可以使用CSS样式进行设置。通过添加以下代码到你的样式表中,即可实现该效果:
```css
.el-input-number input::-webkit-outer-spin-button,
.el-input-number input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
.el-input-number input[type='number'] {
-moz-appearance: textfield;
}
```
这段代码中,`::-webkit-outer-spin-button`和`::-webkit-inner-spin-button`选择器用于去掉外部和内部的旋转按钮,`[type='number']`选择器用于指定只针对type为number的输入框生效。这样,el-input中type为number的输入框就会去掉上下箭头了。
需要注意的是,这段代码需要在el-input的父级元素上添加`.el-input-number`类名,这样才能正确地应用这些样式。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [Quasar Input:type=number 去掉上下小箭头 实现加减按钮样式功能](https://download.csdn.net/download/weixin_38535132/13967868)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [el-input-number修改默认上下图标,el-input-number修改默认增减图标](https://blog.csdn.net/weixin_41346436/article/details/130061738)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [element ui el-input输入框type=number去掉上下箭头](https://blog.csdn.net/cnfabu/article/details/127426028)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]
element ui input type=number 去掉上下箭头
可以通过设置 CSS 样式来去掉 element ui input type=number 的上下箭头,具体方法如下:
.el-input-number .el-input-number__increase,
.el-input-number .el-input-number__decrease {
display: none;
}