Сдвигающийся плейсхолдер
Замена атрибута placeholder тегом label и последующая манипуляция им
Данное решение выполнено через псевдокласс :placeholder-shown
, который отображает текст подсказки, заданной атрибутом placeholder
.
Замена атрибута placeholder тегом label и последующая манипуляция им
Данное решение выполнено через псевдокласс :placeholder-shown
, который отображает текст подсказки, заданной атрибутом placeholder
.
Создание и оформление кнопок плюс и минус для поля <input>
Небольшой скрипт на jQuery, который при нажатии на соотвествующую кнопку, прибавляет и отнимает единичку в текстовом поле.
Также в этой теме есть несколько вариантов оформления этих кнопок.
Оформление переключателей radio в виде карточек для тарифов или другой информации
Ранее уже был похожий пример в теме "Радиокнопки с иконками". Этот отличается немного другой реализацией, оформлением и предназначением.
Вывод заданных блоков при изменении элементов формы radio, checkbox и select
Частенько при изменении элементов формы, нужно показать другие ее элементы или вывести текстовую информацию.
В данной теме показаны примеры на jQuery для показа ранее скрытых блоков при выбранном значении radio
, checkbox
и select
Оформление ползунка input type="range", вывод его значения и линейки с диапазоном.
Использование стандартного ползунка <input type="range"/>
часто бывает более простым и удобным, чем применение различных библиотек и плагинов, например jQuery UI Slider. Его оформление и функционал уступают не сильно, а вот кол-во кода на странице значительно уменьшается.
В данной теме рассмотрен один из вариантов стилизации такого ползунка.
Плавное перемещение подсветки активной радиокнопки
Данное решение заменяет стандартные радиокнопки <input type="radio" />
обычными кнопками, а небольшой JS реализует плавный переход подсветки на активную.
Небольшой скрипт на jQuery реализующий поиск и фильтрацию контента по буквам
Данный скрипт убирает контент, который не имеет совпадения с искомыми данными, а также подсвечивает найденное буквосочетание.
Стилизация переключателей radio с использованием иконочных шрифтов или картинок
В примере используется шрифт Font Awesome и графическая иконка
Вариант использования фонового изображения на переключателе checkbox
Эффект сделан на чистом CSS