css美化number类型输入框美化实现自定义+、-号点击按钮增减效果-优快云博客

本文介绍了一种简单的网页自增减数按钮的实现方法，使用HTML和CSS进行布局，并通过JavaScript来控制按钮的点击事件，实现数值的增加或减少功能。

 
         <!DOCTYPE html>
        
         <html lang=
         "en"
         > 
        
         <head>
        
         <meta charset=
         "utf-8" 
         /> 
        
         <title>Jay Skript And The Domsters</title> 
        
         <style type=
         "text/css"
         > 
        
         *{border:none;margin:0px;padding:0px;} 
        
         .number{ padding: 36px 0 28px;width:400px;margin:auto}
        
         .mui-numbox{ display: inline-block;}
        
         .minus{width: 30px; height: 30px; text-align: center;border: solid 1px 
         #eaeaea; background: #f5f5f5; color: #9e9e9e;}  
        
         .numbox{border-top: solid 1px 
         #eaeaea; border-bottom: solid 1px #eaeaea; height: 28px; width:60px; color: #333333; margin-left:-8px; text-align: center; background: transparent;} 
        
         .numbox::textfield-decoration-container {
        
         }
        
         .numbox::-webkit-inner-spin-button {
        
         -webkit-appearance: none; 
        
         }
        
         .numbox::-webkit-outer-spin-button {
        
         -webkit-appearance: none;    
         /* 有无看不出差别 */ 
        
         }
        
         .plus { margin-left: -8px;}
        
         </style> 
        
         </head>
        
         <body >
        
         <div class=
         "number"
         > 
        
         购买数量: 
        
         <div class=
         "mui-numbox"
         > 
        
         <button class=
         "minus" 
         type=
         "button" 
         onclick=
         "opera('val', false);"
         >-</button> 
        
         <input class=
         "numbox" 
         type=
         "number" 
         id=
         "val" 
         value=
         "0"
         /> 
        
         <button class=
         "minus plus" 
         type=
         "button" 
         onclick=
         "opera('val', true);"
         >+</button> 
        
         人次 
        
         </div> 
        
         <script type=
         "text/javascript"
         > 
        
         function 
         opera(x, y) { 
        
         var 
         rs = 
         new 
         Number(document.getElementById(x).value); 
        
         if 
         (y) { 
        
         document.getElementById(x).value = rs + 1; 
        
         } 
         else 
         if
         ( rs >0) { 
        
         document.getElementById(x).value = rs - 1; 
        
         } 
        
         } 
        
         </script> 
        
         </body>
        
         </html>