Главная / CSS / Стилизация поля количество

Стилизация поля количество

htmlcssjsРезультат

Скопировано

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
		<link rel='stylesheet' type='text/css' href='snippet0036.css'>
		<script src='//code.jquery.com/jquery-3.4.1.min.js'></script>
		<script src='snippet0036.js'></script>
	</head>
	<body>
		<span class='qty'>
			<i class='minus'></i>
			<input type='number' value='1' min='1'>
			<i class='plus'></i>
		</span>
	</body>
</html>

Показать код

Скопировано

i {
	display: inline-block;
	vertical-align: middle;
	width: 50px;
	height: 35px;
	cursor: pointer;
	opacity: .7;
}
i:hover {
	opacity: 1;
}
.minus {
	background: url(/wp-content/snippets/snippet0036-img1.png) no-repeat 50% 50%;
}
.plus {
	background: url(/wp-content/snippets/snippet0036-img2.png) no-repeat 50% 50%;
}
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
}
[type=number] {
	-moz-appearance: textfield;
	width: 70px;
	height: 35px;
	padding: 0;
	text-align: center;
	border: 1px solid #aaa;
}

Показать код

Скопировано

jQuery(document).ready(function( $ ) {
	$(document).on( 'click', 'i', function() {
		var val = $( 'input' ).val();
		if( $(this).hasClass( 'plus' ) ) val++;
		else if( val > 1 ) val--;
		$( 'input' ).val( val )
	});	
});

Показать код

Так же этот пример демонстрирует, как скрыть стрелки у input[type=number]. Это строки 18-21 и 23 файла стилей.