CSS样式去除input和textarea点击选中框,只能输入数字

最新推荐文章于 2020-10-21 10:30:07 发布

置顶最骚的就是你

最新推荐文章于 2020-10-21 10:30:07 发布

阅读量2.7k

点赞数

分类专栏： web前端学习文章标签： css 数字只能输入数字默认样式 input

本文链接：https://blog.csdn.net/libin_1/article/details/52124569

版权

web前端学习专栏收录该内容

301 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-2.2.2.min.js"></script>
        <style type="text/css">
            * {
                padding: 0px;
                margin: 0px;
            }

            body {
                width: 100%;
                height: 100%;
            }

            .java {
                position: relative;
                width: 600px;
                height: 400px;
                background: green;
                opacity: 0.9;
            }

            .telphone {
                margin: 10px auto;
                width: 302px;
                height: 36px;
                background: #FFFFFF;
                overflow: hidden;
                border-radius: 5px;
            }

            .telphone img {
                vertical-align: middle;
                margin-left: 14px;
                margin-right: 14px;
            }
            /*也可以
             * input[type="text"] {
                outline: none;
                appearance: none;
                width: 202px;
                height: 36px;
                background-color: white;
                border: 0px solid #FFFFFF;
            }

            input[type='text']:focus {
                border: 0px solid green;
                 outline: none; 
                color: black;
                background-color: #FFFFFF;
            }*/

            .telphone input {
                width: 202px;
                height: 36px;
                line-height: 36px;
                background-color: white;
                border: 0px solid #FFFFFF;
                appearance: none;
                outline: none;
                font-size: 15px;
            }

            .telphone input:focus {
                color: black;line-height: 36px;
                background-color: #FFFFFF;
                border: 0px solid red;
                font-size: 15px;
            }

            ::-webkit-input-placeholder {
                /* WebKit browsers */
                color: red;
            }

            .passwds {
                margin: 10px auto;
                width: 302px;
                height: 36px;
                /*border: 1px solid red;*/
                overflow: hidden;
                border-radius: 5px;
            }

            .passwd {
                height: 36px;
                background: #FFFFFF;
                overflow: hidden;
                border-radius: 5px;
                width: 200px;
                float: left;
            }

            .passwd img {
                vertical-align: middle;
                margin-left: 14px;
                margin-right: 14px;
            }

            .passwd input {
                width: 132px;line-height: 36px;
                height: 36px;
                background-color: white;
                border: 0px solid #FFFFFF;
                appearance: none;
                outline: none;
                font-size: 15px;
            }

            .passwd input:focus {
                color: black;line-height: 36px;
                background-color: #FFFFFF;
                border: 0px solid red;
                font-size: 15px;
            }

            button {
                float: right;
                width: 80px;
                height: 36px;
                display: inline;
                background-color: blueviolet;
                border: 0px solid blueviolet;
                outline: none;
                border-radius: 5px;
                color: red;
            }
        </style>
        <script type="text/javascript">
            $(function() {

            })
        </script>
    </head>

    <body>
        <div class="java">
            <h1>hahaha</h1>
            <div class="telphone">
                <img src="img/close_hov.png" />
                <!-- <input type="tel" placeholder="只能输入数字" /> -->
                <input type="tel" maxlength="11" size="14" name="amount" id="amount" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" placeholder="只能输入数字" />
            </div>
            <div class="passwds">
                <div class="passwd">
                    <img src="img/close_hov.png" />
                    <!-- <input type="tel" placeholder="只能输入数字" /> -->
                    <input type="tel" maxlength="4" size="14" name="amount" id="amount" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" placeholder="只能输入数字" />
                </div>
                <button>立即注册</button>
            </div>

        </div>

    </body>

</html>

取消input和textarea的聚焦边框： 

复制代码代码如下:

input{outline:none} 

取消textarea可拖动放大： 

复制代码代码如下:

textarea{resize:none}

1、去除Chrome等浏览器文本框默认发光边框




input:focus, textarea:focus {
    outline: none;
}
去掉高光样式：

input:focus{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    -webkit-user-modify:read-write-plaintext-only;
}

当然这样以来，当文本框载入焦点时，所有浏览器下的文本框的边框都不会有颜色上及样式上的变化了，但我们可以重新根据自己的需要设置一下，如：





input:focus,textarea:focus {
    outline: none;
    border: 1px solid #f60;
}
这样的话，当文本框载入焦点时，边框颜色就会变为橙色，给用户一个反馈。

取消chrome下input和textarea的聚焦边框：

input,button,select,textarea{outline:none}
取消chrome下textarea可拖动放大：

textarea{resize:none}
最后，写在一起，重置input和textarea的默认样式：

input,button,select,textarea{outline:none}
textarea{resize:none}
ok，问题解决，好像safari下也是有这些默认样式的，加这个也能同样取消。

最骚的就是你

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS样式去除input和textarea点击选中框,只能输入数字

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-2.2.2.min.js"></script> <style type="text/css">
复制链接

扫一扫