效果如下:
全部代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>购物车列表</title> </head> <style type="text/css"> /*base.css*/ html { -webkit-tap-highlight-color: transparent } body { margin: 0 } a { text-decoration: none } a:focus, button:focus, input:focus, textarea:focus { outline: 0 } ol, ul { margin: 0; padding: 0; list-style: none } /*+-计数器*/ .van-stepper { font-size: 0 } .van-stepper__minus, .van-stepper__plus { width: 40px; height: 30px; box-sizing: border-box; background-color: #fff; border: 1px solid #eee; position: relative; padding: 5px; vertical-align: middle } .van-stepper__minus::before, .van-stepper__plus::before { width: 9px; height: 1px } .van-stepper__minus::after, .van-stepper__plus::after { width: 1px; height: 9px } .van-stepper__minus::after, .van-stepper__minus::before, .van-stepper__plus::after, .van-stepper__plus::before { content: ''; position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; background-color: #6c6c6c } .van-stepper__minus { border-radius: 2px 0 0 2px } .van-stepper__minus::after { display: none } .van-stepper__plus { border-radius: 0 2px 2px 0 } .van-stepper__input { width: 33px; height: 26px; padding: 1px; border: 1px solid #eee; border-width: 1px 0; border-radius: 0; box-sizing: content-box; color: #666; font-size: 14px; vertical-align: middle; text-align: center; -webkit-appearance: none } .van-stepper input[type=number]::-webkit-inner-spin-button, .van-stepper input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0 } </style> <body> <div class=""> <div class="van-stepper"> <button class="van-stepper__minus"></button> <input type="number" class="van-stepper__input" value="2"> <button class="van-stepper__plus"></button> </div> </div> </body> </html>