去除input和textarea点击选中框,只能输入数字代码,Css代码库,德仔网

代码语言
代码分类
【Css】去除input和textarea点击选中框,只能输入数字
作者:Yvette / 发布于2017/3/28/ 934
<!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>
试试其它关键字
同语言下
可能有用的
Yvette贡献的其它代码(20)