input [type=number] 各主流浏览器上隐藏/去掉右侧箭头、x号、小眼睛及 maxlength设置

最新推荐文章于 2024-07-29 14:52:42 发布

freedom_文

最新推荐文章于 2024-07-29 14:52:42 发布

阅读量3.8k

点赞数 1

分类专栏： CSS form

本文链接：https://blog.csdn.net/freedomVenly/article/details/81867618

版权

CSS 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

form

8 篇文章 0 订阅

订阅专栏

这里写图片描述
备忘，直接上代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width:300px;
            margin: 30px auto;
        }

        input{
            width: 100%;
            padding: 6px 12px;
            margin-left: 10px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        }

        /*Chrome 下去除type ==  "number"  时 的右侧图标*/
        #n1::-webkit-outer-spin-button,
        #n1::-webkit-inner-spin-button{
            -webkit-appearance: none !important;
            margin: 0;
        }

        /*火狐 下去除type ==  "number"  时 的右侧图标*/
        input[type="number"]{-moz-appearance:textfield;}

        /*IE下去除 右边的×*/
        input::-ms-clear{display:none;}




        /*IE下去除 小眼睛*/
        #n3::-ms-reveal{display:none;}
    </style>
</head>
<body>
<br><br><br>

    <!--type ==  "number"  时 ，大浏览器下会有 上下箭头出现-->
    <div>
        <input type="number" id="n1">
    </div>


    <!--type ==  "tel"  时 ，部分浏览器下会有 X 号出现-->
    <div>
        <input type="tel" id="n2">
    </div>



    <!--type ==  "tel"  时 ，部分浏览器下会有 类似小眼睛一样的图标 出现-->
    <div>
        <input type="password" id="n3">
    </div>

</body>
</html>

Chrome 、火狐、 IE 都测试完毕，没什么问题，下面图片是IE下截图：（IE9 以上）
这里写图片描述

这里写图片描述

input 的属性： maxlength 在type=”number” 的情况下有些不好使；
需要再加上一句：

<div>
    <input type="number" maxlength="5" oninput="if(value.length>5)value=value.slice(0,5)">
</div>

酱紫就可以了~

freedom_文

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

input [type=number] 各主流浏览器上隐藏/去掉右侧箭头、x号、小眼睛 及 maxlength设置

input [type=number] 各主流浏览器上隐藏/去掉右侧箭头、x号、小眼睛及 maxlength设置