input 框重置

最新推荐文章于 2024-04-29 17:39:04 发布

weixin_30849403

最新推荐文章于 2024-04-29 17:39:04 发布

阅读量931

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/huoan/p/9207299.html

本文提供了一段HTML和CSS代码示例，展示了如何去除网页中input number输入框的上下箭头，并对输入框进行样式重置，包括调整内边距、边框、圆角等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>