Цель поста: поделиться с разработчиками решением использования кроссбраузерного «input type="number"» или узнать о лучших решениях. Основная проблема состоит в том, что данный тип input`a по-разному отображается в разных браузерах, и кастомизировать его, через css практически не возможно. Данное решение позволяет легко оформить стрелочки в соответствии с дизайном, а так же отобразить их в тех браузерах, в которых не поддерживается нативный «input type="number"».

На данный момент плагину передается только один параметр — это селектор, к которому применяется js код:

jQuery(function ($) {
	$('input[type=number]').iLightInputNumber();
});

Для примера возьмем три input`a с разными атрибутами:

<input type="number" id="input01" step="100" min="0" class="input1" placeholder="Your budget">
<input type="number" min="1" max="99" class="input2" placeholder="1">
<input type="number" min="1" class="input3 input4" value="1">

Рабочий пример.

Проверено: opera, chrome, ff, ie9+

Передо мной стояла следующая задача:



Есть блок с фоном (необязательно однородным), в нем какое-то количество круглых элементов с белым фоном, внутри которых размещены закругленные картинки любого размера. Если размер картинки меньше размера блока — она центрируется (как по вертикали, так и по горизонтали), если же размер картинки больше размера блока — больший параметр картинки занимает 100% параметра блока, а второй параметр сохраняет пропорциональное отношение, как и в оригинальной картинке.