css计步器购物车中的+ - 样式

最新推荐文章于 2025-05-27 17:16:27 发布

择一城终老...

最新推荐文章于 2025-05-27 17:16:27 发布

阅读量2.2k

点赞数

文章标签： css 购物车+- 计步器

效果如下：

全部代码

<!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>