美文网首页
input type=number的输入框里面的上下箭头去掉

input type=number的输入框里面的上下箭头去掉

作者: 小呆糊总 | 来源:发表于2020-12-08 16:56 被阅读0次
    input type=number每次输入数字时,多出来的上下黑箭头不想用,但是又想使用number输入控制
    image.png
     <el-input class="numberInputStyle"></el-input>
    
    样式如下:
    .numberInputStyle  input[type=number] {  
        -moz-appearance:textfield;  
    }  
    .numberInputStyle  input[type=number]::-webkit-inner-spin-button,  
    .numberInputStyle  input[type=number]::-webkit-outer-spin-button {  
        -webkit-appearance: none;  
        margin: 0;  
    }  
    
    这样,依然只能输入数字,其他不可输入
    image.png
    CSS3 appearance 属性
    所有主流浏览器都不支持 appearance 属性。
    Firefox 支持替代的 -moz-appearance 属性。
    Safari 和 Chrome 支持替代的 -webkit-appearance 属性。
    image.png

    相关文章

      网友评论

          本文标题:input type=number的输入框里面的上下箭头去掉

          本文链接:https://www.haomeiwen.com/subject/sshqgktx.html