input 框 重置

input框重置，啥都不说，直接上代码，简单粗暴

 顺便告知，input里number框的上下箭头怎么去除。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input[type="number"]{text-indent: 5px; padding:3px 0;
            border:1px solid #ddd;
            /*outline:none;  !*内边框*!*/
            -webkit-border-radius: 10px;
            border-radius: 10px;
        }
        /*重置placeholder样式*/
        input[type="number"]:-ms-input-placeholder{ color:#bdbdc3;}
        input[type="number"]::-webkit-input-placeholder{ color:#bdbdc3;}
        /* 重置input focus的样式*/
        input[type="number"]:focus{outline:none;border:none;background:#fff;box-shadow:0 0 0.2rem #ff464e;}
        /*去掉input 的number里的上下箭头*/
        input[type="number"]::-webkit-outer-spin-button,input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none;}
    </style>
</head>
<body>


<p>
    <input type="number">
</p>
</body>
</html>

 

posted @ 2018-06-21 09:50  灬安  阅读(673)  评论(1)  编辑  收藏  举报