ElementUI el-input number类型右侧加减隐藏和中文光标偏移

最新推荐文章于 2025-03-06 13:30:04 发布

原创最新推荐文章于 2025-03-06 13:30:04 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #html

这段CSS代码是为了解决在使用ElementUI的el-input组件且类型设为number时，中文输入法下光标位置异常的问题。通过设置-moz-appearance和-webkit-appearance，以及调整line-height和inner/outer-spin-button的样式，可以消除浏览器默认的数字按钮并修正光标位置。

::v-deep .el-input {
  input[type="number"] {
    padding-right: 0px;
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    // 解决el-input设置类型为number时，中文输入法光标上移问题
    line-height: 1px !important;
  }
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
}