Style your form text input visually

step 1: Edit each dev block separately to style your number picker.

Edit this dev block to change the colour and style of the number input box!

Edit this dev block to change the colour and style of the + box!

Edit this dev block to change the colour and style of the - box!

step 2: Paste "The box 1" ( the dev block under this text ) to your project and then remove everything apart from number picker!

step 3: Paste this into your costume footer code.

<script>
(function($) {
$.fn.spinner = function() {
this.each(function() {
var el = $(this);// add elements
el.wrap('<span class="spinner"></span>');
el.before('<span class="sub">-</span>');
el.after('<span class="add">+</span>');// substract
el.parent().on('click', '.sub', function () {
if (el.val() > parseInt(el.attr('min')))
el.val( function(i, oldval) { return --oldval; });
});// increment
el.parent().on('click', '.add', function () {
if (el.val() < parseInt(el.attr('max')))
el.val( function(i, oldval) { return ++oldval; });
});
});
};
})(jQuery);$('input[type=number]').spinner();
</script>

Other examples that you can achieve with this hack.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.