JS / CSS – graficzny checkbox

Standardowy wygląd formularzy odszedł już w niepamięć. Teraz formularze są ładne, kolorowe i dostarczają wiele informacji. Po pojęciem ładne i kolorowe mam na myśli możliwość zmiany koloru obramowania gdy coś wpisujemy lub gdy wpiszemy nie poprawną wartość np literę zamiast cyfry.

To wszystko można zrobić za pomocą CSS. Problem pojawia się, gdy chcemy mieć graficzny checbox…Za pomocą czystego CSS nie ma możliwości zmiany. Istnieje na pewno wiele skryptów JS, które taką możliwość zaoferują. Sam ostatnio szukałem i trafiłem na ciekawy, aczkolwiek bardzo prosty skróty, który rozwiązał mój problem w kilka minut.

Skrypt nazywa się: simpleImageCheck

W celu zmiany checkboxa na graficzny wystarczy kilka linijek:

  1. $('#login_checkbox').simpleImageCheck({
  2. image:'img/check.png',
  3. imageChecked:'img/checked.png'
  4. });

Wywołujemy funkcję simpleImageCheck na checkbox’ie z parametrami:

  • image to obrazek jako niezaznaczony
  • imageChecked jako zaznaczony

Należy tylko pamiętać, aby ścieżka do obrazka była prawidłowa. Gotowe :)